From cbf97254a22d7d917acf9297027794c238359704 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 31 Aug 2025 19:06:07 +0200
Subject: [PATCH] Fix sidebar collapse functionality across all layouts

- Change from :mini-variant to :rail for Vue 3/Vuetify 3 compatibility
- Fix width prop to use numbers instead of strings
- Add missing loading ref in board members page
- Ensure consistent collapse behavior across admin, member, and board layouts
---
 layouts/admin.vue  | 27 ++++++++++++++++++---------
 layouts/board.vue  | 27 ++++++++++++++++++---------
 layouts/member.vue |  4 ++--
 3 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/layouts/admin.vue b/layouts/admin.vue
index a4348a0..03242e7 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -3,8 +3,8 @@
     <v-navigation-drawer 
       v-model="drawer" 
       app 
-      :width="miniVariant ? '64' : '280'" 
-      :mini-variant="miniVariant"
+      :width="miniVariant ? 64 : 280" 
+      :rail="miniVariant"
       class="enhanced-glass-drawer"
     >
       <!-- Enhanced Logo Section -->
@@ -32,13 +32,22 @@
       <!-- Enhanced Navigation Menu -->
       <v-list nav density="comfortable" class="enhanced-glass-nav">
         <!-- Admin Overview -->
-        <v-list-item 
-          to="/admin/dashboard" 
-          prepend-icon="mdi-view-dashboard"
-          title="Admin Dashboard"
-          value="dashboard"
-          class="glass-nav-item animated-nav-item"
-        />
+        <v-tooltip 
+          :text="miniVariant ? 'Admin Dashboard' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/admin/dashboard" 
+              prepend-icon="mdi-view-dashboard"
+              :title="!miniVariant ? 'Admin Dashboard' : undefined"
+              value="dashboard"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
 
         <!-- User Management -->
         <v-list-group value="users">
diff --git a/layouts/board.vue b/layouts/board.vue
index 315c611..1e7b175 100644
--- a/layouts/board.vue
+++ b/layouts/board.vue
@@ -3,8 +3,8 @@
     <v-navigation-drawer 
       v-model="drawer" 
       app 
-      :width="miniVariant ? '64' : '280'" 
-      :mini-variant="miniVariant"
+      :width="miniVariant ? 64 : 280" 
+      :rail="miniVariant"
       class="enhanced-glass-drawer"
     >
       <!-- Enhanced Logo Section -->
@@ -32,13 +32,22 @@
       <!-- Enhanced Navigation Menu -->
       <v-list nav density="comfortable" class="enhanced-glass-nav">
         <!-- Board Overview -->
-        <v-list-item 
-          to="/board/dashboard" 
-          prepend-icon="mdi-view-dashboard"
-          title="Board Dashboard"
-          value="dashboard"
-          class="glass-nav-item animated-nav-item"
-        />
+        <v-tooltip 
+          :text="miniVariant ? 'Board Dashboard' : ''"
+          location="end"
+          :disabled="!miniVariant"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item 
+              v-bind="props"
+              to="/board/dashboard" 
+              prepend-icon="mdi-view-dashboard"
+              :title="!miniVariant ? 'Board Dashboard' : undefined"
+              value="dashboard"
+              class="glass-nav-item animated-nav-item"
+            />
+          </template>
+        </v-tooltip>
 
         <!-- Member Management -->
         <v-list-group value="members">
diff --git a/layouts/member.vue b/layouts/member.vue
index da85d0f..62d17e5 100644
--- a/layouts/member.vue
+++ b/layouts/member.vue
@@ -3,8 +3,8 @@
     <v-navigation-drawer 
       v-model="drawer" 
       app 
-      :width="miniVariant ? '64' : '280'"
-      :mini-variant="miniVariant"
+      :width="miniVariant ? 64 : 280"
+      :rail="miniVariant"
       class="enhanced-glass-drawer"
     >
       <!-- Logo Section with Enhanced Glass Effect -->