From f20c1ef96a7eac5d92bd712268075191b3e05839 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 31 Aug 2025 19:56:54 +0200
Subject: [PATCH] Fix sidebar collapse functionality for all three layouts

- Changed from fixed width to dynamic width based on miniVariant state
- Replaced v-show with v-if for list groups to properly hide when collapsed
- Added proper template conditionals for logo section
- Added tooltips for all single navigation items when in rail mode
- Fixed badge display to use dot when collapsed
- Ensured proper title binding with undefined when collapsed

This fixes the sidebar collapse issue across admin, board, and member layouts.
---
 layouts/admin.vue  | 146 +++++++++++++++++++++++++++++----------------
 layouts/board.vue  | 142 ++++++++++++++++++++++++++++---------------
 layouts/member.vue |  49 ++++++++-------
 3 files changed, 217 insertions(+), 120 deletions(-)

diff --git a/layouts/admin.vue b/layouts/admin.vue
index 460f36e..5b82ef2 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -5,28 +5,36 @@
       :rail="miniVariant"
       :expand-on-hover="false"
       permanent
-      width="280"
-      rail-width="56"
+      :width="miniVariant ? 56 : 280"
       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="miniVariant ? 40 : 80" 
-          :height="miniVariant ? 40 : 80"
-          class="mx-auto mb-2 shimmer-animation" 
-        />
-        <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"
-        >
-          ADMINISTRATOR
-        </v-chip>
+        <template v-if="!miniVariant">
+          <v-img 
+            src="/MONACOUSA-Flags_376x376.png" 
+            width="80" 
+            height="80"
+            class="mx-auto mb-2 shimmer-animation" 
+          />
+          <div class="text-h6 font-weight-bold text-gradient">
+            MonacoUSA Portal
+          </div>
+          <v-chip 
+            size="x-small" 
+            class="glass-badge mt-1"
+          >
+            ADMINISTRATOR
+          </v-chip>
+        </template>
+        <template v-else>
+          <v-img 
+            src="/MONACOUSA-Flags_376x376.png" 
+            width="40" 
+            height="40"
+            class="mx-auto shimmer-animation" 
+          />
+        </template>
       </v-list-item>
       
       <v-divider class="glass-divider mx-3" />
@@ -52,7 +60,7 @@
         </v-tooltip>
 
         <!-- User Management -->
-        <v-list-group value="users" v-show="!miniVariant">
+        <v-list-group value="users" v-if="!miniVariant">
           <template v-slot:activator="{ props }">
             <v-list-item
               v-bind="props"
@@ -87,7 +95,7 @@
         </v-list-group>
 
         <!-- Member Management -->
-        <v-list-group value="members" v-show="!miniVariant">
+        <v-list-group value="members" v-if="!miniVariant">
           <template v-slot:activator="{ props }">
             <v-list-item
               v-bind="props"
@@ -118,7 +126,7 @@
         </v-list-group>
 
         <!-- Financial Management -->
-        <v-list-group value="financial" v-show="!miniVariant">
+        <v-list-group value="financial" v-if="!miniVariant">
           <template v-slot:activator="{ props }">
             <v-list-item
               v-bind="props"
@@ -149,7 +157,7 @@
         </v-list-group>
 
         <!-- System Configuration -->
-        <v-list-group value="system" v-show="!miniVariant">
+        <v-list-group value="system" v-if="!miniVariant">
           <template v-slot:activator="{ props }">
             <v-list-item
               v-bind="props"
@@ -192,41 +200,77 @@
         </v-list-group>
 
         <!-- Events Management -->
-        <v-list-item 
-          to="/admin/events" 
-          prepend-icon="mdi-calendar"
-          title="Events Management"
-          value="events"
-          class="glass-nav-item animated-nav-item"
-        />
+        <v-tooltip 
+          :text="miniVariant ? 'Events Management' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/admin/events" 
+              prepend-icon="mdi-calendar"
+              :title="!miniVariant ? 'Events Management' : undefined"
+              value="events"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
 
         <!-- Analytics -->
-        <v-list-item 
-          to="/admin/analytics" 
-          prepend-icon="mdi-chart-line"
-          title="Analytics & Insights"
-          value="analytics"
-          class="glass-nav-item animated-nav-item"
-        />
+        <v-tooltip 
+          :text="miniVariant ? 'Analytics & Insights' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/admin/analytics" 
+              prepend-icon="mdi-chart-line"
+              :title="!miniVariant ? 'Analytics & Insights' : undefined"
+              value="analytics"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
 
         <v-divider class="my-2 glass-divider" />
         
         <!-- Portal Access -->
-        <v-list-subheader class="monaco-subheader">Portal Access</v-list-subheader>
-        <v-list-item 
-          to="/board/dashboard" 
-          prepend-icon="mdi-shield-account"
-          title="Board Portal"
-          value="board-view"
-          class="glass-nav-item animated-nav-item"
-        />
-        <v-list-item 
-          to="/member/dashboard" 
-          prepend-icon="mdi-account"
-          title="Member Portal"
-          value="member-view"
-          class="glass-nav-item animated-nav-item"
-        />
+        <v-list-subheader v-if="!miniVariant" class="monaco-subheader">Portal Access</v-list-subheader>
+        <v-tooltip 
+          :text="miniVariant ? 'Board Portal' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/board/dashboard" 
+              prepend-icon="mdi-shield-account"
+              :title="!miniVariant ? 'Board Portal' : undefined"
+              value="board-view"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
+        <v-tooltip 
+          :text="miniVariant ? 'Member Portal' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/member/dashboard" 
+              prepend-icon="mdi-account"
+              :title="!miniVariant ? 'Member Portal' : undefined"
+              value="member-view"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
       </v-list>
       
       <!-- Enhanced Profile Card -->
diff --git a/layouts/board.vue b/layouts/board.vue
index 13e0f07..4b36ee9 100644
--- a/layouts/board.vue
+++ b/layouts/board.vue
@@ -5,28 +5,36 @@
       :rail="miniVariant"
       :expand-on-hover="false"
       permanent
-      width="280"
-      rail-width="56"
+      :width="miniVariant ? 56 : 280"
       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="miniVariant ? 40 : 80" 
-          :height="miniVariant ? 40 : 80"
-          class="mx-auto mb-2 shimmer-animation" 
-        />
-        <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"
-        >
-          BOARD MEMBER
-        </v-chip>
+        <template v-if="!miniVariant">
+          <v-img 
+            src="/MONACOUSA-Flags_376x376.png" 
+            width="80" 
+            height="80"
+            class="mx-auto mb-2 shimmer-animation" 
+          />
+          <div class="text-h6 font-weight-bold text-gradient">
+            MonacoUSA Portal
+          </div>
+          <v-chip 
+            size="x-small" 
+            class="glass-badge mt-1"
+          >
+            BOARD MEMBER
+          </v-chip>
+        </template>
+        <template v-else>
+          <v-img 
+            src="/MONACOUSA-Flags_376x376.png" 
+            width="40" 
+            height="40"
+            class="mx-auto shimmer-animation" 
+          />
+        </template>
       </v-list-item>
       
       <v-divider class="glass-divider mx-3" />
@@ -52,7 +60,7 @@
         </v-tooltip>
 
         <!-- Member Management -->
-        <v-list-group value="members" v-show="!miniVariant">
+        <v-list-group value="members" v-if="!miniVariant">
           <template v-slot:activator="{ props }">
             <v-list-item
               v-bind="props"
@@ -92,7 +100,7 @@
         </v-list-group>
 
         <!-- Events & Meetings -->
-        <v-list-group value="events" v-show="!miniVariant">
+        <v-list-group value="events" v-if="!miniVariant">
           <template v-slot:activator="{ props }">
             <v-list-item
               v-bind="props"
@@ -123,43 +131,79 @@
         </v-list-group>
 
         <!-- Reports & Analytics -->
-        <v-list-item 
-          to="/board/reports" 
-          prepend-icon="mdi-chart-box"
-          title="Reports & Analytics"
-          value="reports"
-          class="glass-nav-item animated-nav-item"
-        />
+        <v-tooltip 
+          :text="miniVariant ? 'Reports & Analytics' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/board/reports" 
+              prepend-icon="mdi-chart-box"
+              :title="!miniVariant ? 'Reports & Analytics' : undefined"
+              value="reports"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
 
         <!-- Governance -->
-        <v-list-item 
-          to="/board/governance" 
-          prepend-icon="mdi-gavel"
-          title="Governance"
-          value="governance"
-          class="glass-nav-item animated-nav-item"
-        />
+        <v-tooltip 
+          :text="miniVariant ? 'Governance' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/board/governance" 
+              prepend-icon="mdi-gavel"
+              :title="!miniVariant ? 'Governance' : undefined"
+              value="governance"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
 
         <!-- Communications -->
-        <v-list-item 
-          to="/board/communications" 
-          prepend-icon="mdi-email-newsletter"
-          title="Communications"
-          value="communications"
-          class="glass-nav-item animated-nav-item"
-        />
+        <v-tooltip 
+          :text="miniVariant ? 'Communications' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/board/communications" 
+              prepend-icon="mdi-email-newsletter"
+              :title="!miniVariant ? 'Communications' : undefined"
+              value="communications"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
 
         <v-divider class="my-2 glass-divider" />
         
         <!-- Member Section Access -->
-        <v-list-subheader class="monaco-subheader">Member Portal</v-list-subheader>
-        <v-list-item 
-          to="/member/dashboard" 
-          prepend-icon="mdi-account"
-          title="Member View"
-          value="member-view"
-          class="glass-nav-item animated-nav-item"
-        />
+        <v-list-subheader v-if="!miniVariant" class="monaco-subheader">Member Portal</v-list-subheader>
+        <v-tooltip 
+          :text="miniVariant ? 'Member View' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/member/dashboard" 
+              prepend-icon="mdi-account"
+              :title="!miniVariant ? 'Member View' : undefined"
+              value="member-view"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
       </v-list>
       
       <!-- Enhanced Profile Card -->
diff --git a/layouts/member.vue b/layouts/member.vue
index 3c83113..943d44d 100644
--- a/layouts/member.vue
+++ b/layouts/member.vue
@@ -5,29 +5,38 @@
       :rail="miniVariant"
       :expand-on-hover="false"
       permanent
-      width="280"
-      rail-width="56"
+      :width="miniVariant ? 56 : 280"
       class="enhanced-glass-drawer"
     >
       <!-- Logo Section with Enhanced Glass Effect -->
       <v-list-item class="logo-section">
-        <v-img 
-          src="/MONACOUSA-Flags_376x376.png" 
-          :width="miniVariant ? 40 : 80" 
-          :height="miniVariant ? 40 : 80"
-          class="mx-auto logo-image mb-2"
-        />
-        <div v-if="!miniVariant" class="logo-text">
-          <div class="text-h6 font-weight-bold monaco-red-text">
-            MonacoUSA Portal
+        <template v-if="!miniVariant">
+          <v-img 
+            src="/MONACOUSA-Flags_376x376.png" 
+            width="80" 
+            height="80"
+            class="mx-auto logo-image mb-2"
+          />
+          <div class="logo-text">
+            <div class="text-h6 font-weight-bold monaco-red-text">
+              MonacoUSA Portal
+            </div>
+            <v-chip 
+              size="x-small" 
+              class="monaco-chip-gradient mt-1"
+            >
+              MEMBER
+            </v-chip>
           </div>
-          <v-chip 
-            size="x-small" 
-            class="monaco-chip-gradient mt-1"
-          >
-            MEMBER
-          </v-chip>
-        </div>
+        </template>
+        <template v-else>
+          <v-img 
+            src="/MONACOUSA-Flags_376x376.png" 
+            width="40" 
+            height="40"
+            class="mx-auto logo-image"
+          />
+        </template>
       </v-list-item>
       
       <v-divider class="glass-divider" />
@@ -44,7 +53,7 @@
               <v-list-item 
                 :to="item.to" 
                 :prepend-icon="item.icon"
-                :title="!miniVariant ? item.title : ''"
+                :title="!miniVariant ? item.title : undefined"
                 :value="item.value"
                 class="nav-item-enhanced"
                 v-bind="props"
@@ -54,7 +63,7 @@
                     :content="item.badge"
                     color="error"
                     inline
-                    :dot="isCollapsed"
+                    :dot="miniVariant"
                   />
                 </template>
               </v-list-item>