From 9b045c7b9752b1c70b1d8a7755205e63a85091d7 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 11 Jul 2025 17:04:13 -0400
Subject: [PATCH] fix: Switch to pure Vuetify components for unified sidebar

- Remove Nuxt UI dependency that was causing conflicts
- Use v-navigation-drawer with rail prop for collapsible functionality
- Implement proper Vuetify list components for navigation
- Add responsive behavior with drawer toggle on mobile
- Fix layout structure to work with existing Vuetify setup
---
 layouts/dashboard-unified.vue | 287 +++++++++++++++++-----------------
 nuxt.config.ts                |   2 +-
 2 files changed, 144 insertions(+), 145 deletions(-)

diff --git a/layouts/dashboard-unified.vue b/layouts/dashboard-unified.vue
index 9278cb9..c3841f5 100644
--- a/layouts/dashboard-unified.vue
+++ b/layouts/dashboard-unified.vue
@@ -1,146 +1,132 @@
 <template>
-  <div class="min-h-screen bg-gray-50 flex">
-    <!-- Sidebar -->
-    <div
-      :class="[
-        'bg-white border-r border-gray-200 transition-all duration-300',
-        sidebarOpen ? 'w-64' : 'w-0 overflow-hidden',
-        'lg:w-64'
-      ]"
+  <v-app>
+    <v-navigation-drawer
+      v-model="drawer"
+      :rail="rail"
+      permanent
+      color="white"
+      class="elevation-2"
     >
-      <div class="h-full flex flex-col">
-        <!-- Header -->
-        <div class="px-4 py-4 border-b border-gray-100">
-          <div class="flex items-center gap-3">
-            <img 
-              src="/Port Nimara New Logo-Circular Frame.png" 
-              class="h-8 w-8"
-              alt="Port Nimara"
+      <!-- Logo and Title -->
+      <v-list>
+        <v-list-item
+          class="px-2"
+          prepend-avatar="/Port Nimara New Logo-Circular Frame.png"
+          :title="rail ? '' : 'Port Nimara'"
+          :subtitle="rail ? '' : 'Client Portal'"
+        >
+          <template v-slot:append>
+            <v-btn
+              icon
+              variant="text"
+              size="small"
+              @click.stop="rail = !rail"
             >
-            <div class="flex flex-col">
-              <span class="text-sm font-semibold text-gray-900">Port Nimara</span>
-              <span class="text-xs text-gray-500">Client Portal</span>
-            </div>
-          </div>
-        </div>
+              <v-icon>{{ rail ? 'mdi-menu' : 'mdi-chevron-left' }}</v-icon>
+            </v-btn>
+          </template>
+        </v-list-item>
+      </v-list>
 
-        <!-- Navigation -->
-        <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
-          <NuxtLink
-            v-for="item in navigationItems"
-            :key="item.to"
-            :to="item.to"
-            class="group flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200"
-            :class="[
-              route.path === item.to
-                ? 'bg-blue-50 text-blue-700'
-                : 'text-gray-700 hover:bg-gray-100'
-            ]"
-          >
-            <Icon
-              :name="item.icon"
-              class="w-5 h-5 flex-shrink-0"
-              :class="[
-                route.path === item.to
-                  ? 'text-blue-700'
-                  : 'text-gray-400 group-hover:text-gray-600'
-              ]"
-            />
-            <span class="truncate">{{ item.label }}</span>
-          </NuxtLink>
-        </nav>
+      <v-divider></v-divider>
 
-        <!-- Footer -->
-        <div class="px-4 py-4 border-t border-gray-100 space-y-2">
-          <!-- User Info -->
-          <div v-if="authState?.user" class="flex items-center gap-3 p-2">
-            <div class="flex-shrink-0">
-              <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white text-sm font-medium">
-                {{ (authState.user.name || authState.user.email || '?')[0].toUpperCase() }}
-              </div>
-            </div>
-            <div class="flex-1 min-w-0">
-              <p class="text-sm font-medium text-gray-900 truncate">
-                {{ authState.user.name || authState.user.email }}
-              </p>
-              <p class="text-xs text-gray-500 truncate">
-                {{ authState.user.email }}
-              </p>
-            </div>
-          </div>
+      <!-- Navigation Items -->
+      <v-list density="compact" nav>
+        <v-list-item
+          v-for="item in navigationItems"
+          :key="item.to"
+          :prepend-icon="item.icon"
+          :title="item.label"
+          :value="item.to"
+          :to="item.to"
+          color="primary"
+          rounded="xl"
+          class="mx-1"
+        ></v-list-item>
+      </v-list>
 
-          <!-- Role Badge -->
-          <div v-if="authState?.groups?.length" class="px-2">
-            <div
-              v-if="authState.groups.includes('admin')"
-              class="inline-flex items-center justify-center w-full px-2 py-1 text-xs font-medium text-orange-700 bg-orange-100 rounded-md"
+      <template v-slot:append>
+        <v-divider></v-divider>
+        
+        <!-- User Info Section -->
+        <div class="pa-2">
+          <v-list v-if="authState?.user">
+            <v-list-item
+              :prepend-avatar="`https://ui-avatars.com/api/?name=${encodeURIComponent(authState.user.name || authState.user.email)}&background=387bca&color=fff`"
+              :title="authState.user.name || authState.user.email"
+              :subtitle="authState.user.email"
+              class="px-2"
             >
-              Admin
-            </div>
-            <div
-              v-else-if="authState.groups.includes('sales')"
-              class="inline-flex items-center justify-center w-full px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-md"
-            >
-              Sales
-            </div>
-          </div>
-
-          <!-- Logout Button -->
-          <button
-            @click="handleLogout"
-            class="w-full flex items-center justify-start gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors duration-200"
-          >
-            <Icon name="i-heroicons-arrow-left-on-rectangle" class="w-5 h-5 text-gray-400" />
-            <span>Logout</span>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Main Content -->
-    <div class="flex-1 flex flex-col">
-      <!-- Top Bar -->
-      <header class="bg-white border-b border-gray-200 px-4 py-3">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-4">
-            <!-- Mobile Menu Toggle -->
-            <button
-              @click="sidebarOpen = !sidebarOpen"
-              class="lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
-            >
-              <Icon name="i-heroicons-bars-3" class="w-6 h-6" />
-            </button>
+              <template v-slot:append v-if="!rail && authState?.groups?.length">
+                <div>
+                  <v-chip 
+                    v-if="authState.groups.includes('admin')" 
+                    size="small" 
+                    color="orange"
+                    variant="tonal"
+                  >
+                    Admin
+                  </v-chip>
+                  <v-chip 
+                    v-else-if="authState.groups.includes('sales')" 
+                    size="small" 
+                    color="green"
+                    variant="tonal"
+                  >
+                    Sales
+                  </v-chip>
+                </div>
+              </template>
+            </v-list-item>
             
-            <!-- Page Title -->
-            <h1 class="text-xl font-semibold text-gray-900">{{ pageTitle }}</h1>
-          </div>
+            <v-list-item
+              @click="handleLogout"
+              prepend-icon="mdi-logout"
+              title="Logout"
+              class="px-2 mt-1"
+              base-color="error"
+              rounded="xl"
+            ></v-list-item>
+          </v-list>
         </div>
-      </header>
+      </template>
+    </v-navigation-drawer>
 
-      <!-- Page Content -->
-      <main class="flex-1 p-6 overflow-y-auto">
-        <slot />
-      </main>
-    </div>
-  </div>
+    <v-app-bar 
+      flat
+      color="white"
+      class="border-b"
+    >
+      <v-app-bar-nav-icon
+        @click="drawer = !drawer"
+        class="d-lg-none"
+      ></v-app-bar-nav-icon>
+
+      <v-toolbar-title class="text-h6">
+        {{ pageTitle }}
+      </v-toolbar-title>
+
+      <v-spacer></v-spacer>
+    </v-app-bar>
+
+    <v-main class="bg-grey-lighten-4">
+      <slot />
+    </v-main>
+  </v-app>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-
-// Define NavigationMenuItem type locally
-interface NavigationMenuItem {
-  label: string;
-  icon: string;
-  to: string;
-}
+import { ref, computed, onMounted } from 'vue';
+import { useDisplay } from 'vuetify';
 
 const route = useRoute();
 const router = useRouter();
 const nuxtApp = useNuxtApp();
+const { mdAndDown } = useDisplay();
 
 // Sidebar state
-const sidebarOpen = ref(false);
+const drawer = ref(true);
+const rail = ref(false);
 
 // Get auth state - with fallback to prevent errors
 const authState = computed(() => {
@@ -157,6 +143,7 @@ const pageTitle = computed(() => {
   const routeName = route.name as string;
   const pageTitles: Record<string, string> = {
     'dashboard': 'Dashboard',
+    'dashboard-index': 'Dashboard',
     'dashboard-expenses': 'Expense Tracking',
     'dashboard-interest-list': 'Interest List',
     'dashboard-berth-list': 'Berth List',
@@ -167,52 +154,52 @@ const pageTitle = computed(() => {
     'dashboard-interest-analytics': 'Analytics',
     'dashboard-file-browser': 'File Browser',
     'dashboard-admin': 'Admin Console',
+    'dashboard-admin-index': 'Admin Console',
     'dashboard-admin-audit-logs': 'Audit Logs',
     'dashboard-admin-system-logs': 'System Logs',
     'dashboard-admin-duplicates': 'Duplicate Management',
+    'dashboard-sidebar-demo': 'Sidebar Demo',
   };
   
-  return pageTitles[routeName] || routeName?.split('-').map(word => 
-    word.charAt(0).toUpperCase() + word.slice(1)
-  ).join(' ') || 'Dashboard';
+  return pageTitles[routeName] || 'Dashboard';
 });
 
 // Navigation items based on user role
-const navigationItems = computed((): NavigationMenuItem[] => {
-  const items: NavigationMenuItem[] = [
+const navigationItems = computed(() => {
+  const items = [
     {
       label: 'Dashboard',
-      icon: 'i-heroicons-home',
+      icon: 'mdi-home',
       to: '/dashboard',
     },
     {
       label: 'Analytics',
-      icon: 'i-heroicons-chart-bar',
+      icon: 'mdi-chart-bar',
       to: '/dashboard/interest-analytics',
     },
     {
       label: 'Berth List',
-      icon: 'i-heroicons-table-cells',
+      icon: 'mdi-table',
       to: '/dashboard/interest-berth-list',
     },
     {
       label: 'Berth Status',
-      icon: 'i-heroicons-map',
+      icon: 'mdi-map',
       to: '/dashboard/interest-berth-status',
     },
     {
       label: 'Interest List',
-      icon: 'i-heroicons-users',
+      icon: 'mdi-account-multiple',
       to: '/dashboard/interest-list',
     },
     {
       label: 'Interest Status',
-      icon: 'i-heroicons-clipboard-document-check',
+      icon: 'mdi-clipboard-check',
       to: '/dashboard/interest-status',
     },
     {
       label: 'File Browser',
-      icon: 'i-heroicons-folder-open',
+      icon: 'mdi-folder-open',
       to: '/dashboard/file-browser',
     },
   ];
@@ -222,12 +209,12 @@ const navigationItems = computed((): NavigationMenuItem[] => {
     items.push(
       {
         label: 'Expenses',
-        icon: 'i-heroicons-receipt-percent',
+        icon: 'mdi-receipt',
         to: '/dashboard/expenses',
       },
       {
         label: 'Interest Emails',
-        icon: 'i-heroicons-envelope',
+        icon: 'mdi-email',
         to: '/dashboard/interest-emails',
       }
     );
@@ -237,7 +224,7 @@ const navigationItems = computed((): NavigationMenuItem[] => {
   if (authState.value?.groups?.includes('admin')) {
     items.push({
       label: 'Admin Console',
-      icon: 'i-heroicons-shield-check',
+      icon: 'mdi-shield-crown',
       to: '/dashboard/admin',
     });
   }
@@ -256,13 +243,25 @@ const handleLogout = async () => {
     await router.push('/login');
   }
 };
+
+// Initialize drawer state on mobile
+onMounted(() => {
+  if (mdAndDown.value) {
+    drawer.value = false;
+  }
+});
 </script>
 
 <style scoped>
-/* Ensure proper responsive behavior */
-@media (min-width: 1024px) {
-  .lg\:w-64 {
-    width: 16rem !important;
-  }
+.border-b {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
+}
+
+.v-navigation-drawer--rail .v-list-item__append {
+  display: none;
+}
+
+.v-navigation-drawer--rail.v-navigation-drawer--is-hovering .v-list-item__append {
+  display: flex;
 }
 </style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 72edfec..0b7f993 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,7 +2,7 @@ export default defineNuxtConfig({
   ssr: false,
   compatibilityDate: "2024-11-01",
   devtools: { enabled: true },
-  modules: ["nuxt-directus", "vuetify-nuxt-module", "@vite-pwa/nuxt", "@nuxt/ui"],
+  modules: ["nuxt-directus", "vuetify-nuxt-module", "@vite-pwa/nuxt"],
   app: {
     head: {
       titleTemplate: "%s • Port Nimara Portal",