From ce7d5af450db16c738070c89a17db482421d3f49 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 31 Aug 2025 18:53:21 +0200
Subject: [PATCH] Restore fully collapsible sidebar with mini-variant mode

- Added three-state sidebar (closed, mini, full) across all layouts
- Positioned collapse toggle button in app bar
- Made logo and text responsive to collapsed state
- Added proper tooltips for mini mode navigation
- Consistent implementation across board, admin, and member portals
---
 layouts/admin.vue  | 35 +++++++++++++++++++++++++++++++----
 layouts/board.vue  | 35 +++++++++++++++++++++++++++++++----
 layouts/member.vue | 33 +++++++++++++++++++++++++++------
 3 files changed, 89 insertions(+), 14 deletions(-)

diff --git a/layouts/admin.vue b/layouts/admin.vue
index 2511596..a4348a0 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -1,18 +1,25 @@
 <template>
   <v-app>
-    <v-navigation-drawer v-model="drawer" app width="280" permanent class="enhanced-glass-drawer">
+    <v-navigation-drawer 
+      v-model="drawer" 
+      app 
+      :width="miniVariant ? '64' : '280'" 
+      :mini-variant="miniVariant"
+      class="enhanced-glass-drawer"
+    >
       <!-- Enhanced Logo Section -->
       <v-list-item class="pa-4 text-center enhanced-glass-logo">
         <v-img 
           src="/MONACOUSA-Flags_376x376.png" 
-          width="80" 
-          height="80"
+          :width="miniVariant ? 40 : 80" 
+          :height="miniVariant ? 40 : 80"
           class="mx-auto mb-2 shimmer-animation" 
         />
-        <div class="text-h6 font-weight-bold text-gradient">
+        <div v-if="!miniVariant" class="text-h6 font-weight-bold text-gradient">
           MonacoUSA Portal
         </div>
         <v-chip 
+          v-if="!miniVariant"
           size="x-small" 
           class="glass-badge mt-1"
         >
@@ -267,6 +274,14 @@
     </v-navigation-drawer>
     
     <v-app-bar app elevation="0" flat class="glass-app-bar admin-bar">
+      <v-btn
+        icon
+        @click="toggleDrawer"
+        class="glass-icon-btn mr-2"
+      >
+        <v-icon>{{ miniVariant ? 'mdi-menu' : 'mdi-menu-open' }}</v-icon>
+      </v-btn>
+      
       <v-toolbar-title class="font-weight-bold d-flex align-center text-white">
         Admin Portal
         <v-chip 
@@ -446,6 +461,7 @@ import ProfileAvatar from '~/components/ProfileAvatar.vue';
 
 const { user, logout } = useAuth();
 const drawer = ref(true);
+const miniVariant = ref(false);
 const alerts = ref(0);
 const systemStatus = ref<'healthy' | 'warning' | 'error'>('healthy');
 const systemAlerts = ref<Array<{ id: number; message: string }>>([]);
@@ -480,6 +496,17 @@ const openKeycloak = () => {
   window.open('https://auth.monacousa.org/admin', '_blank');
 };
 
+const toggleDrawer = () => {
+  if (!drawer.value) {
+    drawer.value = true;
+    miniVariant.value = false;
+  } else if (miniVariant.value) {
+    miniVariant.value = false;
+  } else {
+    miniVariant.value = true;
+  }
+};
+
 const toggleCommandPalette = () => {
   commandPaletteOpen.value = true;
 };
diff --git a/layouts/board.vue b/layouts/board.vue
index 5902d9f..315c611 100644
--- a/layouts/board.vue
+++ b/layouts/board.vue
@@ -1,18 +1,25 @@
 <template>
   <v-app>
-    <v-navigation-drawer v-model="drawer" app width="280" permanent class="enhanced-glass-drawer">
+    <v-navigation-drawer 
+      v-model="drawer" 
+      app 
+      :width="miniVariant ? '64' : '280'" 
+      :mini-variant="miniVariant"
+      class="enhanced-glass-drawer"
+    >
       <!-- Enhanced Logo Section -->
       <v-list-item class="pa-4 text-center enhanced-glass-logo">
         <v-img 
           src="/MONACOUSA-Flags_376x376.png" 
-          width="80" 
-          height="80"
+          :width="miniVariant ? 40 : 80" 
+          :height="miniVariant ? 40 : 80"
           class="mx-auto mb-2 shimmer-animation" 
         />
-        <div class="text-h6 font-weight-bold text-gradient">
+        <div v-if="!miniVariant" class="text-h6 font-weight-bold text-gradient">
           MonacoUSA Portal
         </div>
         <v-chip 
+          v-if="!miniVariant"
           size="x-small" 
           class="glass-badge mt-1"
         >
@@ -200,6 +207,14 @@
     </v-navigation-drawer>
     
     <v-app-bar app elevation="0" flat class="glass-app-bar board-bar">
+      <v-btn
+        icon
+        @click="toggleDrawer"
+        class="glass-icon-btn mr-2"
+      >
+        <v-icon>{{ miniVariant ? 'mdi-menu' : 'mdi-menu-open' }}</v-icon>
+      </v-btn>
+      
       <v-toolbar-title class="font-weight-bold text-white">
         Board Portal
       </v-toolbar-title>
@@ -334,6 +349,7 @@ import ProfileAvatar from '~/components/ProfileAvatar.vue';
 
 const { user, logout } = useAuth();
 const drawer = ref(true);
+const miniVariant = ref(false);
 const notifications = ref(0);
 const pendingApplications = ref(0);
 const searchOpen = ref(false);
@@ -361,6 +377,17 @@ onMounted(async () => {
   }
 });
 
+const toggleDrawer = () => {
+  if (!drawer.value) {
+    drawer.value = true;
+    miniVariant.value = false;
+  } else if (miniVariant.value) {
+    miniVariant.value = false;
+  } else {
+    miniVariant.value = true;
+  }
+};
+
 const toggleSearch = () => {
   searchOpen.value = true;
 };
diff --git a/layouts/member.vue b/layouts/member.vue
index f313173..da85d0f 100644
--- a/layouts/member.vue
+++ b/layouts/member.vue
@@ -3,18 +3,19 @@
     <v-navigation-drawer 
       v-model="drawer" 
       app 
-      width="280"
+      :width="miniVariant ? '64' : '280'"
+      :mini-variant="miniVariant"
       class="enhanced-glass-drawer"
     >
       <!-- Logo Section with Enhanced Glass Effect -->
       <v-list-item class="logo-section">
         <v-img 
           src="/MONACOUSA-Flags_376x376.png" 
-          width="80" 
-          height="80"
+          :width="miniVariant ? 40 : 80" 
+          :height="miniVariant ? 40 : 80"
           class="mx-auto logo-image mb-2"
         />
-        <div class="logo-text">
+        <div v-if="!miniVariant" class="logo-text">
           <div class="text-h6 font-weight-bold monaco-red-text">
             MonacoUSA Portal
           </div>
@@ -35,13 +36,13 @@
           <v-tooltip 
             :text="item.title" 
             location="right"
-            :disabled="!isCollapsed"
+            :disabled="!miniVariant"
           >
             <template v-slot:activator="{ props }">
               <v-list-item 
                 :to="item.to" 
                 :prepend-icon="item.icon"
-                :title="!isCollapsed ? item.title : ''"
+                :title="!miniVariant ? item.title : ''"
                 :value="item.value"
                 class="nav-item-enhanced"
                 v-bind="props"
@@ -111,6 +112,14 @@
     </v-navigation-drawer>
     
     <v-app-bar app elevation="0" flat class="glass-app-bar member-bar">
+      <v-btn
+        icon
+        @click="toggleDrawer"
+        class="glass-icon-btn mr-2"
+      >
+        <v-icon>{{ miniVariant ? 'mdi-menu' : 'mdi-menu-open' }}</v-icon>
+      </v-btn>
+      
       <v-toolbar-title class="font-weight-bold text-white">
         Member Portal
       </v-toolbar-title>
@@ -207,6 +216,7 @@ import type { Member } from '~/utils/types';
 
 const { user, logout } = useAuth();
 const drawer = ref(true);
+const miniVariant = ref(false);
 const notifications = ref(0);
 
 // Navigation items configuration
@@ -272,6 +282,17 @@ onMounted(async () => {
   }
 });
 
+const toggleDrawer = () => {
+  if (!drawer.value) {
+    drawer.value = true;
+    miniVariant.value = false;
+  } else if (miniVariant.value) {
+    miniVariant.value = false;
+  } else {
+    miniVariant.value = true;
+  }
+};
+
 const handleLogout = async () => {
   await logout();
 };