Fix sidebar collapse functionality for all three layouts

- Remove manual width control that was conflicting with rail prop
- Use fixed width and rail-width props for proper Vuetify 3 behavior
- Simplify toggleDrawer function to just toggle miniVariant
- Add v-show directive to hide list groups in rail mode
- Applied fixes to admin.vue, member.vue, and board.vue layouts

The sidebar now properly collapses to 56px rail mode showing only icons,
and expands to 280px full width showing complete navigation items.

layouts/admin.vue

@@ -3,10 +3,11 @@
     <v-navigation-drawer 
       v-model="drawer" 
       app 
-      :width="miniVariant ? 56 : 280" 
       :rail="miniVariant"
       :expand-on-hover="false"
       permanent
+      width="280"
+      rail-width="56"
       class="enhanced-glass-drawer"
     >
       <!-- Enhanced Logo Section -->
@@ -52,7 +53,7 @@
         </v-tooltip>
 
         <!-- User Management -->
-        <v-list-group value="users">
+        <v-list-group value="users" v-show="!miniVariant">
           <template v-slot:activator="{ props }">
             <v-list-item
               v-bind="props"
@@ -87,7 +88,7 @@
         </v-list-group>
 
         <!-- Member Management -->
-        <v-list-group value="members">
+        <v-list-group value="members" v-show="!miniVariant">
           <template v-slot:activator="{ props }">
             <v-list-item
               v-bind="props"
@@ -118,7 +119,7 @@
         </v-list-group>
 
         <!-- Financial Management -->
-        <v-list-group value="financial">
+        <v-list-group value="financial" v-show="!miniVariant">
           <template v-slot:activator="{ props }">
             <v-list-item
               v-bind="props"
@@ -149,7 +150,7 @@
         </v-list-group>
 
         <!-- System Configuration -->
-        <v-list-group value="system">
+        <v-list-group value="system" v-show="!miniVariant">
           <template v-slot:activator="{ props }">
             <v-list-item
               v-bind="props"
@@ -508,14 +509,7 @@ const openKeycloak = () => {
 };
 
 const toggleDrawer = () => {
-  if (!drawer.value) {
+  miniVariant.value = !miniVariant.value;
-    drawer.value = true;
-    miniVariant.value = false;
-  } else if (miniVariant.value) {
-    miniVariant.value = false;
-  } else {
-    miniVariant.value = true;
-  }
 };
 
 const toggleCommandPalette = () => {

layouts/board.vue

@@ -3,10 +3,11 @@
     <v-navigation-drawer 
       v-model="drawer" 
       app 
-      :width="miniVariant ? 56 : 280" 
       :rail="miniVariant"
       :expand-on-hover="false"
       permanent
+      width="280"
+      rail-width="56"
       class="enhanced-glass-drawer"
     >
       <!-- Enhanced Logo Section -->
@@ -52,7 +53,7 @@
         </v-tooltip>
 
         <!-- Member Management -->
-        <v-list-group value="members">
+        <v-list-group value="members" v-show="!miniVariant">
           <template v-slot:activator="{ props }">
             <v-list-item
               v-bind="props"
@@ -92,7 +93,7 @@
         </v-list-group>
 
         <!-- Events & Meetings -->
-        <v-list-group value="events">
+        <v-list-group value="events" v-show="!miniVariant">
           <template v-slot:activator="{ props }">
             <v-list-item
               v-bind="props"
@@ -389,14 +390,7 @@ onMounted(async () => {
 });
 
 const toggleDrawer = () => {
-  if (!drawer.value) {
+  miniVariant.value = !miniVariant.value;
-    drawer.value = true;
-    miniVariant.value = false;
-  } else if (miniVariant.value) {
-    miniVariant.value = false;
-  } else {
-    miniVariant.value = true;
-  }
 };
 
 const toggleSearch = () => {

layouts/member.vue

@@ -3,10 +3,11 @@
     <v-navigation-drawer 
       v-model="drawer" 
       app 
-      :width="miniVariant ? 56 : 280"
       :rail="miniVariant"
       :expand-on-hover="false"
       permanent
+      width="280"
+      rail-width="56"
       class="enhanced-glass-drawer"
     >
       <!-- Logo Section with Enhanced Glass Effect -->
@@ -285,14 +286,7 @@ onMounted(async () => {
 });
 
 const toggleDrawer = () => {
-  if (!drawer.value) {
+  miniVariant.value = !miniVariant.value;
-    drawer.value = true;
-    miniVariant.value = false;
-  } else if (miniVariant.value) {
-    miniVariant.value = false;
-  } else {
-    miniVariant.value = true;
-  }
 };
 
 const handleLogout = async () => {