Refactor user permissions handling and enhance menu functionality with collapsible headers

style/admin.css

@@ -43,7 +43,7 @@ header {
   position: fixed;
   top: 0;
   left: 0;
-  padding-left: 260px;
+  padding-left: 230px;
   z-index: 999;
   width: 100%;
   height: 55px;
@@ -149,13 +149,6 @@ aside > a i {
   width: 40px;
 }
 
-aside > a:hover, aside > a.selected {
-  background-color: var(--color-green);
-  color: var(--color-white);
-  padding: 15px 17px;
-  border-radius: 5px;
-}
-
 aside > a.selected + .sub {
   display: flex;
 }
@@ -192,6 +185,42 @@ aside .sub a:hover, aside .sub a.selected {
   color: var(--text-color);
 }
 
+/* Expanded submenu (via JS toggle or selected state) */
+aside .sub.expanded {
+  display: flex;
+}
+
+/* Menu Header (collapsible parent with submenus) */
+aside .menu-header {
+  font-size: 14px;
+  text-decoration: none;
+  color: var(--text-color-accent-2);
+  padding: 15px 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  user-select: none;
+}
+
+aside .menu-header i:first-child {
+  color: inherit;
+  width: 40px;
+}
+
+aside .menu-header .menu-text {
+  flex: 1;
+}
+
+aside .menu-header .menu-chevron {
+  width: auto;
+  transition: transform 0.2s ease;
+  font-size: 12px;
+}
+
+aside .menu-header.expanded .menu-chevron {
+  transform: rotate(180deg);
+}
+
 aside .footer {
   display: flex;
   flex-flow: column;
@@ -218,7 +247,7 @@ aside.closed {
 
 main {
   padding: 30px;
-  padding-left: 290px;
+  padding-left: 240px;
   padding-top: 65px;
 }