# Sash – Bootstrap 5 Admin & Dashboard HTML Template

##### How to add Sticky Header

Add `sticky` class as shown below For Particular div

    <!-- STICKY JS -->
    <script src="../assets/js/stiky.js"></script>

##### How to Add Perfect pscroll

You can Declare Both id's and classes

You can Declare classes in place of pscroll

    <!-- Perfect SCROLLBAR JS -->
    <script src="../assets/plugins/p-scroll/perfect-scrollbar.js"></script>
    <script src="../assets/plugins/p-scroll/pscroll.js"></script>

Below js is in p-scroll-1.js(assets/js/p-scroll-1.js)

    //P-scrolling
    const ps = new PerfectScrollbar('.app-sidebar', {
    	useBothWheelAxes:true,
    	suppressScrollX:true,
    });

Note : After Changing scss you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

Type | URL
--- | ---
Plugin Link | https://plugins.jquery.com/perfect-scrollbar/

##### How to Add Loader

    <!-- Custom js-->
    <script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    // ______________ PAGE LOADING
    $(window).on("load", function(e) {
    	$("#global-loader").fadeOut("slow");
    })

Note : After Changing scss you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

##### How to Add Back To Top

        <!-- Custom js-->
    <script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    // ______________ BACK TO TOP BUTTON
    $(window).on("scroll", function(e) {
    	if ($(this).scrollTop() > 0) {
    		$('#back-to-top').fadeIn('slow');
    	} else {
    		$('#back-to-top').fadeOut('slow');
    	}
    });
    $(document).on("click", "#back-to-top", function(e) {
    	$("html, body").animate({
    		scrollTop: 0
    	}, 600);
    	return false;
    });

Note : After Changing scss you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

##### How to Add FullScreen in Header

Add class `fullscreen-button` to icon as shown below For Particular Icon

    <!-- Custom js-->
    <script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    // ______________Full screen
    $(document).on("click", ".fullscreen-button", function toggleFullScreen() {
    	$('html').addClass('fullscreen-button');
    	if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
    		if (document.documentElement.requestFullScreen) {
    			document.documentElement.requestFullScreen();
    		} else if (document.documentElement.mozRequestFullScreen) {
    			document.documentElement.mozRequestFullScreen();
    		} else if (document.documentElement.webkitRequestFullScreen) {
    			document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    		} else if (document.documentElement.msRequestFullscreen) {
    			document.documentElement.msRequestFullscreen();
    		}
    	} else {
    		$('html').removeClass('fullscreen-button');
    		if (document.cancelFullScreen) {
    			document.cancelFullScreen();
    		} else if (document.mozCancelFullScreen) {
    			document.mozCancelFullScreen();
    		} else if (document.webkitCancelFullScreen) {
    			document.webkitCancelFullScreen();
    		} else if (document.msExitFullscreen) {
    			document.msExitFullscreen();
    		}
    	}
    })

##### How to Add Tooltip

Add The HTML Properties `data-bs-toggle`, `data-bs-placement`, `title` and Property Values to Button as shown below For the Particular button

    <!-- Custom js-->
    <script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    // ___________TOOLTIP
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    	return new bootstrap.Tooltip(tooltipTriggerEl)
    })

##### How to Add Popover

Add The HTML Properties `data-bs-toggle`, `data-bs-container`, `data-bs-placement`, `title`,`data-bs-content` and Property Values to Button as shown below For the Particular button

    <!-- Custom js-->
    <script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    // __________POPOVER
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
    })

##### Card

##### Remove Card

    <!-- Custom js-->
    <script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    // ______________ CARD
    const DIV_CARD = 'div.card';
    // ______________ FUNCTION FOR REMOVE CARD
    $(document).on('click', '[data-bs-toggle="card-remove"]', function(e) {
    	let $card = $(this).closest(DIV_CARD);
    	$card.remove();
    	e.preventDefault();
    	return false;
    });

##### Card Collapse

        <!-- Custom js-->
    <script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    // ______________ CARD
    const DIV_CARD = 'div.card';
    // ______________ FUNCTIONS FOR COLLAPSED CARD
    $(document).on('click', '[data-bs-toggle="card-collapse"]', function(e) {
    	let $card = $(this).closest(DIV_CARD);
    	$card.toggleClass('card-collapsed');
    	e.preventDefault();
    	return false;
    });

##### Card FullScreen

    <!-- Custom js-->
    <script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    // ______________ CARD
    const DIV_CARD = 'div.card';
    // ______________Card Full Screen
    $(document).on('click', '[data-bs-toggle="card-fullscreen"]', function(e) {
    	let $card = $(this).closest(DIV_CARD);
    	$card.toggleClass('card-fullscreen').removeClass('card-collapsed');
    	e.preventDefault();
    	return false;
    });

##### Font Used

Google fonts are used in the template. They are as follows: Google Fonts

Images are credited by : vecteezy.com. All images are used from vecteezy website. Only we used for preview purpose if you want to use purchase vecteezy

Icons are used from iconscout website: iconscout.com.

###### THANK YOU!