From 1a24faa9db4ae5ac6e34cdfc4f9429fc2484630b Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 11 Jul 2025 17:20:34 -0400
Subject: [PATCH] fix: Improve sidebar UX and mobile/PWA compatibility

- Remove Interest Emails from navigation (hidden as requested)
- Change 'Client Portal' to 'CRM' throughout
- Make logo clickable to expand/collapse sidebar (removed separate button)
- Add proper mobile responsiveness with fixed positioning
- Add PWA safe area insets for standalone mode
- Improve visual alignment and smooth transitions
- Fix rail mode width and spacing issues
---
 layouts/dashboard-unified.vue | 77 +++++++++++++++++++++++++++--------
 1 file changed, 60 insertions(+), 17 deletions(-)

diff --git a/layouts/dashboard-unified.vue b/layouts/dashboard-unified.vue
index c3841f5..3ee019f 100644
--- a/layouts/dashboard-unified.vue
+++ b/layouts/dashboard-unified.vue
@@ -10,21 +10,12 @@
       <!-- Logo and Title -->
       <v-list>
         <v-list-item
-          class="px-2"
+          class="px-2 cursor-pointer"
           prepend-avatar="/Port Nimara New Logo-Circular Frame.png"
           :title="rail ? '' : 'Port Nimara'"
-          :subtitle="rail ? '' : 'Client Portal'"
+          :subtitle="rail ? '' : 'CRM'"
+          @click="rail = !rail"
         >
-          <template v-slot:append>
-            <v-btn
-              icon
-              variant="text"
-              size="small"
-              @click.stop="rail = !rail"
-            >
-              <v-icon>{{ rail ? 'mdi-menu' : 'mdi-chevron-left' }}</v-icon>
-            </v-btn>
-          </template>
         </v-list-item>
       </v-list>
 
@@ -211,11 +202,6 @@ const navigationItems = computed(() => {
         label: 'Expenses',
         icon: 'mdi-receipt',
         to: '/dashboard/expenses',
-      },
-      {
-        label: 'Interest Emails',
-        icon: 'mdi-email',
-        to: '/dashboard/interest-emails',
       }
     );
   }
@@ -257,6 +243,24 @@ onMounted(() => {
   border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
+/* Improve rail mode appearance */
+.v-navigation-drawer--rail {
+  width: 72px !important;
+}
+
+.v-navigation-drawer--rail .v-list-item {
+  padding-inline-start: 12px !important;
+  padding-inline-end: 12px !important;
+}
+
+.v-navigation-drawer--rail .v-list-item__prepend {
+  margin-inline-end: 0 !important;
+}
+
 .v-navigation-drawer--rail .v-list-item__append {
   display: none;
 }
@@ -264,4 +268,43 @@ onMounted(() => {
 .v-navigation-drawer--rail.v-navigation-drawer--is-hovering .v-list-item__append {
   display: flex;
 }
+
+/* Ensure proper mobile responsiveness */
+@media (max-width: 960px) {
+  .v-navigation-drawer {
+    position: fixed !important;
+    z-index: 1004 !important;
+  }
+  
+  .v-main {
+    padding-left: 0 !important;
+  }
+}
+
+/* PWA optimizations */
+@media (display-mode: standalone) {
+  .v-app-bar {
+    padding-top: env(safe-area-inset-top);
+  }
+  
+  .v-navigation-drawer {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+/* Improve visual alignment */
+.v-list-item__prepend > .v-avatar {
+  margin-inline-end: 16px;
+}
+
+.v-navigation-drawer--rail .v-list-item__prepend > .v-avatar {
+  margin-inline-end: 0;
+}
+
+/* Smooth transitions */
+.v-navigation-drawer,
+.v-list-item__content,
+.v-list-item__prepend {
+  transition: all 0.2s ease-in-out;
+}
 </style>