added notes for menu actions
This commit is contained in:
		@@ -31,39 +31,43 @@
 | 
			
		||||
        const menuBackground = document.querySelector(".js-menu-background");
 | 
			
		||||
        const menuClose = document.querySelector("[data-menu-close]");
 | 
			
		||||
 | 
			
		||||
        //animation for notification icon
 | 
			
		||||
        if (document.querySelector('[data-menu="notifications-menu"]')) {
 | 
			
		||||
            setTimeout(function() {
 | 
			
		||||
                document.querySelector('[data-menu="notifications-menu"]').classList.remove("animate-vibrate");
 | 
			
		||||
            }, 6000);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        //chevron active class action
 | 
			
		||||
        Array.from(detailsEL).forEach((el) => {
 | 
			
		||||
                el.addEventListener("toggle", function(e) {
 | 
			
		||||
                    if (e.target.querySelector(".material-icons-outlined")) {
 | 
			
		||||
                        e.target.querySelector(".material-icons").classList.toggle("rotate-180");
 | 
			
		||||
            el.addEventListener("toggle", function(e) {
 | 
			
		||||
                if (e.target.querySelector(".material-icons-outlined")) {
 | 
			
		||||
                    e.target.querySelector(".material-icons").classList.toggle("rotate-180");
 | 
			
		||||
                } else {
 | 
			
		||||
                    if (e.target.querySelectorAll(".material-icons")[1]) {
 | 
			
		||||
                        e.target.querySelectorAll(".material-icons")[1].classList.toggle("rotate-180");
 | 
			
		||||
                    } else {
 | 
			
		||||
                        if (e.target.querySelectorAll(".material-icons")[1]) {
 | 
			
		||||
                            e.target.querySelectorAll(".material-icons")[1].classList.toggle("rotate-180");
 | 
			
		||||
                        } else {
 | 
			
		||||
                            e.target.querySelectorAll(".material-icons")[0].classList.toggle("rotate-180");
 | 
			
		||||
                        }
 | 
			
		||||
                        e.target.querySelectorAll(".material-icons")[0].classList.toggle("rotate-180");
 | 
			
		||||
                    }
 | 
			
		||||
                })
 | 
			
		||||
            }
 | 
			
		||||
        );
 | 
			
		||||
                }
 | 
			
		||||
            })
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        //container animation when left menu shrinking
 | 
			
		||||
        function contentTransitionLeft() {
 | 
			
		||||
            sectionContent.classList.add("xl:ltr:ml-0", "xl:rtl:mr-0");
 | 
			
		||||
            sectionContent.classList.remove("xl:ltr:ml-64", "xl:rtl:mr-64");
 | 
			
		||||
            toggleButton.querySelector("span").classList.add("ltr:-rotate-90", "rtl:rotate-90");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        //container animation when left menu unshrinking
 | 
			
		||||
        function contentTransitionRight() {
 | 
			
		||||
            sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0");
 | 
			
		||||
            sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64");
 | 
			
		||||
            toggleButton.querySelector("span").classList.remove("ltr:-rotate-90", "rtl:rotate-90");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        //if there are notifications, remove count badge
 | 
			
		||||
        function notificationCount(action) {
 | 
			
		||||
            let notification_count = document.querySelector('[data-notification-count]');
 | 
			
		||||
 | 
			
		||||
@@ -72,6 +76,7 @@
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        //slide menu actions together responsive version
 | 
			
		||||
        function slideMenu() {
 | 
			
		||||
            if (document.body.clientWidth <= 1280) {
 | 
			
		||||
                mobileMenuHidden();
 | 
			
		||||
@@ -99,6 +104,8 @@
 | 
			
		||||
            slideMenu();
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
        //general left menu actions (show settings menu etc..)
 | 
			
		||||
        function toggleMenu(iconButton, event) {
 | 
			
		||||
            const menuRef = iconButton.getAttribute("data-menu");
 | 
			
		||||
            const icon = iconButton.children[0].getAttribute("name");
 | 
			
		||||
@@ -165,6 +172,7 @@
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if (document.body.clientWidth >= 1280) {
 | 
			
		||||
            //if url have profile menu, profile menu show
 | 
			
		||||
            if (is_profile_menu == 1) {
 | 
			
		||||
                let profile_menu_html = document.querySelector(".profile-menu");
 | 
			
		||||
                let profile_icon_html = document.querySelector("[data-menu='profile-menu']");
 | 
			
		||||
@@ -180,6 +188,7 @@
 | 
			
		||||
                toggleButton.classList.add("invisible");
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            //if url have settings menu, settings menu show
 | 
			
		||||
            if (is_settings_menu == 1) {
 | 
			
		||||
                let settings_menu_html = document.querySelector(".settings-menu");
 | 
			
		||||
                let settings_icon_html = document.querySelector("[data-menu='settings-menu']");
 | 
			
		||||
@@ -193,6 +202,7 @@
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        //if mobile menu, menu is active
 | 
			
		||||
        function mobileMenuActive() {
 | 
			
		||||
            navbarMenu.classList.add("ltr:left-0", "rtl:right-0");
 | 
			
		||||
            navbarMenu.classList.remove("ltr:-left-80", "rtl:-right-80");
 | 
			
		||||
@@ -201,6 +211,7 @@
 | 
			
		||||
            menuBackground.classList.remove("invisible");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        //if mobile menu, menu is hidden
 | 
			
		||||
        function mobileMenuHidden() {
 | 
			
		||||
            navbarMenu.classList.remove("ltr:left-0", "rtl:right-0");
 | 
			
		||||
            navbarMenu.classList.add("ltr:-left-80", "rtl:-right:80");
 | 
			
		||||
 
 | 
			
		||||
@@ -31,12 +31,14 @@
 | 
			
		||||
        const menuBackground = document.querySelector(".js-menu-background");
 | 
			
		||||
        const menuClose = document.querySelector("[data-menu-close]");
 | 
			
		||||
 | 
			
		||||
        //animation for notification icon
 | 
			
		||||
        if (document.querySelector('[data-menu="notifications-menu"]')) {
 | 
			
		||||
            setTimeout(function() {
 | 
			
		||||
                document.querySelector('[data-menu="notifications-menu"]').classList.remove("animate-vibrate");
 | 
			
		||||
            }, 6000);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        //chevron active class action
 | 
			
		||||
        Array.from(detailsEL).forEach((el) => {
 | 
			
		||||
                el.addEventListener("toggle", function(e) {
 | 
			
		||||
                    if(e.target.querySelector(".material-icons-outlined")) {
 | 
			
		||||
@@ -48,18 +50,21 @@
 | 
			
		||||
            }
 | 
			
		||||
        );
 | 
			
		||||
 | 
			
		||||
        //container animation when left menu shrinking
 | 
			
		||||
        function contentTransitionLeft() {
 | 
			
		||||
            sectionContent.classList.add("xl:ltr:ml-0", "xl:rtl:mr-0");
 | 
			
		||||
            sectionContent.classList.remove("xl:ltr:ml-64", "xl:rtl:mr-64");
 | 
			
		||||
            toggleButton.querySelector("span").classList.add("ltr:-rotate-90", "rtl:rotate-90");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        //container animation when left menu unshrinking
 | 
			
		||||
        function contentTransitionRight() {
 | 
			
		||||
            sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0");
 | 
			
		||||
            sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64");
 | 
			
		||||
            toggleButton.querySelector("span").classList.remove("ltr:-rotate-90", "rtl:rotate-90");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        //slide menu actions together responsive version
 | 
			
		||||
        function slideMenu() {
 | 
			
		||||
            if (document.body.clientWidth <= 1280) {
 | 
			
		||||
                mobileMenuHidden();
 | 
			
		||||
@@ -87,6 +92,7 @@
 | 
			
		||||
            slideMenu();
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        //general left menu actions (show settings menu etc..)
 | 
			
		||||
        function toggleMenu(iconButton, event) {
 | 
			
		||||
            const menuRef = iconButton.getAttribute("data-menu");
 | 
			
		||||
            const icon = iconButton.children[0].getAttribute("name");
 | 
			
		||||
@@ -147,6 +153,7 @@
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if (document.body.clientWidth >= 1280) {
 | 
			
		||||
            //if url have profile menu, profile menu show
 | 
			
		||||
            if (is_profile_menu == 1) {
 | 
			
		||||
                let profile_menu_html = document.querySelector(".profile-menu");
 | 
			
		||||
                let profile_icon_html = document.querySelector("[data-menu='profile-menu']");
 | 
			
		||||
@@ -164,6 +171,7 @@
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        //if mobile menu, menu is active
 | 
			
		||||
        function mobileMenuActive() {
 | 
			
		||||
            navbarMenu.classList.add("ltr:left-0", "rtl:right-0");
 | 
			
		||||
            navbarMenu.classList.remove("ltr:-left-80", "rtl:-right-80");
 | 
			
		||||
@@ -172,6 +180,7 @@
 | 
			
		||||
            menuBackground.classList.remove("invisible");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        //if mobile menu, menu is hidden
 | 
			
		||||
        function mobileMenuHidden() {
 | 
			
		||||
            navbarMenu.classList.remove("ltr:left-0", "rtl:right-0");
 | 
			
		||||
            navbarMenu.classList.add("ltr:-left-80", "rtl:-right:80");
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user