added notes for menu actions

resources/views/components/layouts/admin/scripts.blade.php

@@ -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) {
+            el.addEventListener("toggle", function(e) {
-                    if (e.target.querySelector(".material-icons-outlined")) {
+                if (e.target.querySelector(".material-icons-outlined")) {
-                        e.target.querySelector(".material-icons").classList.toggle("rotate-180");
+                    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")[0].classList.toggle("rotate-180");
-                            e.target.querySelectorAll(".material-icons")[1].classList.toggle("rotate-180");
-                        } else {
-                            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");

resources/views/components/layouts/portal/scripts.blade.php

@@ -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");