From 185ac24067e3c5047a464bd89e3cdc3e32750370 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 31 Aug 2025 19:36:28 +0200
Subject: [PATCH] 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  | 20 +++++++-------------
 layouts/board.vue  | 16 +++++-----------
 layouts/member.vue | 12 +++---------
 3 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/layouts/admin.vue b/layouts/admin.vue
index 443e5fd..b530209 100644
--- a/layouts/admin.vue
+++ b/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) {
-    drawer.value = true;
-    miniVariant.value = false;
-  } else if (miniVariant.value) {
-    miniVariant.value = false;
-  } else {
-    miniVariant.value = true;
-  }
+  miniVariant.value = !miniVariant.value;
 };
 
 const toggleCommandPalette = () => {
diff --git a/layouts/board.vue b/layouts/board.vue
index 81c3831..e140100 100644
--- a/layouts/board.vue
+++ b/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) {
-    drawer.value = true;
-    miniVariant.value = false;
-  } else if (miniVariant.value) {
-    miniVariant.value = false;
-  } else {
-    miniVariant.value = true;
-  }
+  miniVariant.value = !miniVariant.value;
 };
 
 const toggleSearch = () => {
diff --git a/layouts/member.vue b/layouts/member.vue
index e0be7bf..a31d718 100644
--- a/layouts/member.vue
+++ b/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) {
-    drawer.value = true;
-    miniVariant.value = false;
-  } else if (miniVariant.value) {
-    miniVariant.value = false;
-  } else {
-    miniVariant.value = true;
-  }
+  miniVariant.value = !miniVariant.value;
 };
 
 const handleLogout = async () => {