Refactor user permissions handling and enhance menu functionality with collapsible headers

assets/admin.js

@@ -20,6 +20,66 @@ document.querySelector('.responsive-toggle').onclick = event => {
         localStorage.setItem('admin_menu', 'closed');
     }
 };
+
+// Menu header collapse/expand functionality
+document.querySelectorAll('aside .menu-header').forEach(header => {
+    header.addEventListener('click', function(event) {
+        event.preventDefault();
+
+        // Toggle expanded state
+        this.classList.toggle('expanded');
+
+        // Find the next sibling .sub element and toggle display
+        const submenu = this.nextElementSibling;
+        if (submenu && submenu.classList.contains('sub')) {
+            submenu.classList.toggle('expanded');
+            // Update inline style for display
+            submenu.style.display = submenu.classList.contains('expanded') ? 'flex' : 'none';
+        }
+
+        // Rotate chevron
+        const chevron = this.querySelector('.menu-chevron');
+        if (chevron) {
+            chevron.style.transform = this.classList.contains('expanded') ? 'rotate(180deg)' : 'rotate(0deg)';
+        }
+
+        // Store expanded state in localStorage for persistence
+        const section = this.dataset.section;
+        if (section) {
+            const expandedSections = JSON.parse(localStorage.getItem('menu_expanded') || '{}');
+            expandedSections[section] = this.classList.contains('expanded');
+            localStorage.setItem('menu_expanded', JSON.stringify(expandedSections));
+        }
+    });
+});
+
+// Restore menu expanded states from localStorage on page load
+(function restoreMenuState() {
+    const expandedSections = JSON.parse(localStorage.getItem('menu_expanded') || '{}');
+
+    document.querySelectorAll('aside .menu-header').forEach(header => {
+        const section = header.dataset.section;
+        const submenu = header.nextElementSibling;
+        const chevron = header.querySelector('.menu-chevron');
+
+        // If explicitly saved as expanded, apply it
+        if (section && expandedSections[section] === true) {
+            header.classList.add('expanded');
+            if (submenu && submenu.classList.contains('sub')) {
+                submenu.classList.add('expanded');
+                submenu.style.display = 'flex';
+            }
+            if (chevron) chevron.style.transform = 'rotate(180deg)';
+        }
+        // If has selected child, always expand (override localStorage)
+        if (submenu && submenu.querySelector('a.selected')) {
+            header.classList.add('expanded');
+            submenu.classList.add('expanded');
+            submenu.style.display = 'flex';
+            if (chevron) chevron.style.transform = 'rotate(180deg)';
+        }
+    });
+})();
 document.querySelectorAll('.tabs a').forEach((element, index) => {
     element.onclick = event => {
         event.preventDefault();