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