From c37e0d0b1b8696e689724f66185fd487fb738ef9 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 31 Aug 2025 23:19:50 +0200
Subject: [PATCH] Fix sidebar collapse and redesign profile section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increased rail mode width from 56px to 80px to properly fit icons
- Updated rail-width prop in all three layout files (admin, board, member)
- Redesigned profile section with improved layout and positioning
- Added horizontal layout in expanded mode with avatar, info, and menu button
- Implemented responsive design that switches to vertical layout in collapsed mode
- Enhanced menu with colorful icons and hover effects
- Added role badges (Admin, Board, Member) for better visual identification
- Improved glass morphism effects on profile card and menu
- Added smooth transitions and hover animations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 assets/scss/main.scss | 58 ++++++++++++++++++++++++-
 layouts/admin.vue     | 99 ++++++++++++++++++++++++++-----------------
 layouts/board.vue     | 99 ++++++++++++++++++++++++++-----------------
 layouts/member.vue    | 98 +++++++++++++++++++++++++++---------------
 4 files changed, 237 insertions(+), 117 deletions(-)

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 5e960d3..2d27d48 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -938,9 +938,9 @@ $screen-xl: 1280px;
     min-width: 280px;
   }
   
-  // Ensure rail mode uses correct width
+  // Ensure rail mode uses correct width - increased to fit icons
   &.v-navigation-drawer--rail {
-    width: 56px !important;
+    width: 80px !important;
   }
   
   &__content {
@@ -981,4 +981,58 @@ $screen-xl: 1280px;
   .dashboard-header {
     padding: 1rem !important;
   }
+}
+
+// Enhanced Profile Card Styles
+.glass-profile-card {
+  background: rgba(255, 255, 255, 0.08) !important;
+  backdrop-filter: blur(10px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: 12px !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.12) !important;
+    border-color: rgba(255, 255, 255, 0.15) !important;
+    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15) !important;
+  }
+}
+
+.profile-menu-btn {
+  transition: all 0.2s ease !important;
+  
+  &:hover {
+    transform: scale(1.05) !important;
+    background: rgba(255, 255, 255, 0.1) !important;
+  }
+}
+
+.glass-menu {
+  background: rgba(28, 28, 30, 0.95) !important;
+  backdrop-filter: blur(20px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: 12px !important;
+  overflow: hidden !important;
+  
+  .v-list-item {
+    transition: all 0.2s ease !important;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.08) !important;
+      padding-left: 20px !important;
+    }
+    
+    &.hover-lift:hover {
+      transform: translateX(4px) !important;
+    }
+  }
+}
+
+.glass-badge {
+  background: linear-gradient(135deg, rgba(206, 26, 26, 0.2), rgba(255, 255, 255, 0.1)) !important;
+  backdrop-filter: blur(10px) !important;
+  border: 1px solid rgba(206, 26, 26, 0.3) !important;
+  color: #CE1A1A !important;
+  font-weight: 600 !important;
+  letter-spacing: 0.5px !important;
 }
\ No newline at end of file
diff --git a/layouts/admin.vue b/layouts/admin.vue
index b1a95ef..c2e753f 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -6,7 +6,7 @@
       :expand-on-hover="false"
       permanent
       width="280"
-      rail-width="56"
+      rail-width="80"
       class="enhanced-glass-drawer"
     >
       <!-- Enhanced Logo Section -->
@@ -276,53 +276,72 @@
       
       <!-- Enhanced Profile Card -->
       <template v-slot:append>
-        <div class="pa-3">
-          <v-card class="glass-profile-card pa-3">
-            <div class="d-flex flex-column align-center">
+        <div class="pa-2">
+          <v-card class="glass-profile-card overflow-visible">
+            <div class="d-flex align-center" :class="miniVariant ? 'flex-column pa-2' : 'pa-3'">
+              <!-- Avatar Section -->
               <ProfileAvatar
                 :member-id="memberData?.member_id || memberData?.Id"
                 :first-name="memberData?.first_name || user?.firstName"
                 :last-name="memberData?.last_name || user?.lastName"
                 :member-name="memberData?.FullName || user?.name"
-                size="small"
-                class="mb-2"
+                :size="miniVariant ? 'x-small' : 'small'"
+                :class="miniVariant ? 'mb-2' : 'mr-3'"
               />
-              <div class="text-center">
+              
+              <!-- Info Section (Hidden in mini mode) -->
+              <div v-if="!miniVariant" class="flex-grow-1">
                 <div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Administrator' }}</div>
-                <div class="text-caption text-medium-emphasis">{{ user?.email || 'admin@monacousa.org' }}</div>
+                <div class="text-caption text-medium-emphasis">{{ user?.email?.split('@')[0] || 'admin' }}</div>
+                <v-chip size="x-small" class="mt-1 glass-badge">Admin</v-chip>
+              </div>
+              
+              <!-- Action Buttons -->
+              <div :class="miniVariant ? '' : 'ml-auto'">
+                <v-menu location="top" offset-y>
+                  <template v-slot:activator="{ props }">
+                    <v-btn 
+                      v-bind="props"
+                      :icon="miniVariant"
+                      :size="miniVariant ? 'x-small' : 'small'"
+                      :variant="miniVariant ? 'text' : 'tonal'"
+                      class="profile-menu-btn"
+                    >
+                      <v-icon :size="miniVariant ? 'small' : 'default'">
+                        {{ miniVariant ? 'mdi-dots-vertical' : 'mdi-menu' }}
+                      </v-icon>
+                      <span v-if="!miniVariant" class="ml-1">Menu</span>
+                    </v-btn>
+                  </template>
+                  <v-list density="compact" class="glass-menu" min-width="200">
+                    <v-list-item @click="() => {}" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="primary">mdi-account-circle</v-icon>
+                      </template>
+                      <v-list-item-title>My Profile</v-list-item-title>
+                    </v-list-item>
+                    <v-list-item @click="() => {}" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="info">mdi-cog-outline</v-icon>
+                      </template>
+                      <v-list-item-title>Settings</v-list-item-title>
+                    </v-list-item>
+                    <v-list-item @click="() => {}" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="warning">mdi-bell-outline</v-icon>
+                      </template>
+                      <v-list-item-title>Notifications</v-list-item-title>
+                    </v-list-item>
+                    <v-divider class="my-1 glass-divider" />
+                    <v-list-item @click="logout" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="error">mdi-logout-variant</v-icon>
+                      </template>
+                      <v-list-item-title class="text-error">Sign Out</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
               </div>
-              <v-menu location="top">
-                <template v-slot:activator="{ props }">
-                  <v-btn 
-                    v-bind="props"
-                    icon="mdi-dots-vertical" 
-                    size="x-small" 
-                    variant="text"
-                    class="mt-2"
-                  />
-                </template>
-                <v-list density="compact" class="glass-menu">
-                  <v-list-item @click="() => {}">
-                    <template v-slot:prepend>
-                      <v-icon size="small">mdi-account</v-icon>
-                    </template>
-                    <v-list-item-title>Profile</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item @click="() => {}">
-                    <template v-slot:prepend>
-                      <v-icon size="small">mdi-cog</v-icon>
-                    </template>
-                    <v-list-item-title>Settings</v-list-item-title>
-                  </v-list-item>
-                  <v-divider class="my-1" />
-                  <v-list-item @click="logout">
-                    <template v-slot:prepend>
-                      <v-icon size="small">mdi-logout</v-icon>
-                    </template>
-                    <v-list-item-title>Logout</v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
             </div>
           </v-card>
         </div>
diff --git a/layouts/board.vue b/layouts/board.vue
index 0508f7d..ee2f377 100644
--- a/layouts/board.vue
+++ b/layouts/board.vue
@@ -6,7 +6,7 @@
       :expand-on-hover="false"
       permanent
       width="280"
-      rail-width="56"
+      rail-width="80"
       class="enhanced-glass-drawer"
     >
       <!-- Enhanced Logo Section -->
@@ -209,53 +209,72 @@
       
       <!-- Enhanced Profile Card -->
       <template v-slot:append>
-        <div class="pa-3">
-          <v-card class="glass-profile-card pa-3">
-            <div class="d-flex flex-column align-center">
+        <div class="pa-2">
+          <v-card class="glass-profile-card overflow-visible">
+            <div class="d-flex align-center" :class="miniVariant ? 'flex-column pa-2' : 'pa-3'">
+              <!-- Avatar Section -->
               <ProfileAvatar
                 :member-id="memberData?.member_id || memberData?.Id"
                 :first-name="memberData?.first_name || user?.firstName"
                 :last-name="memberData?.last_name || user?.lastName"
                 :member-name="memberData?.FullName || user?.name"
-                size="small"
-                class="mb-2"
+                :size="miniVariant ? 'x-small' : 'small'"
+                :class="miniVariant ? 'mb-2' : 'mr-3'"
               />
-              <div class="text-center">
+              
+              <!-- Info Section (Hidden in mini mode) -->
+              <div v-if="!miniVariant" class="flex-grow-1">
                 <div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Board Member' }}</div>
-                <div class="text-caption text-medium-emphasis">{{ user?.email || 'board@monacousa.org' }}</div>
+                <div class="text-caption text-medium-emphasis">{{ user?.email?.split('@')[0] || 'board' }}</div>
+                <v-chip size="x-small" class="mt-1 glass-badge">Board</v-chip>
+              </div>
+              
+              <!-- Action Buttons -->
+              <div :class="miniVariant ? '' : 'ml-auto'">
+                <v-menu location="top" offset-y>
+                  <template v-slot:activator="{ props }">
+                    <v-btn 
+                      v-bind="props"
+                      :icon="miniVariant"
+                      :size="miniVariant ? 'x-small' : 'small'"
+                      :variant="miniVariant ? 'text' : 'tonal'"
+                      class="profile-menu-btn"
+                    >
+                      <v-icon :size="miniVariant ? 'small' : 'default'">
+                        {{ miniVariant ? 'mdi-dots-vertical' : 'mdi-menu' }}
+                      </v-icon>
+                      <span v-if="!miniVariant" class="ml-1">Menu</span>
+                    </v-btn>
+                  </template>
+                  <v-list density="compact" class="glass-menu" min-width="200">
+                    <v-list-item @click="() => {}" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="primary">mdi-account-circle</v-icon>
+                      </template>
+                      <v-list-item-title>My Profile</v-list-item-title>
+                    </v-list-item>
+                    <v-list-item @click="() => {}" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="info">mdi-cog-outline</v-icon>
+                      </template>
+                      <v-list-item-title>Settings</v-list-item-title>
+                    </v-list-item>
+                    <v-list-item @click="() => {}" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="warning">mdi-bell-outline</v-icon>
+                      </template>
+                      <v-list-item-title>Notifications</v-list-item-title>
+                    </v-list-item>
+                    <v-divider class="my-1 glass-divider" />
+                    <v-list-item @click="logout" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="error">mdi-logout-variant</v-icon>
+                      </template>
+                      <v-list-item-title class="text-error">Sign Out</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
               </div>
-              <v-menu location="top">
-                <template v-slot:activator="{ props }">
-                  <v-btn 
-                    v-bind="props"
-                    icon="mdi-dots-vertical" 
-                    size="x-small" 
-                    variant="text"
-                    class="mt-2"
-                  />
-                </template>
-                <v-list density="compact" class="glass-menu">
-                  <v-list-item @click="() => {}">
-                    <template v-slot:prepend>
-                      <v-icon size="small">mdi-account</v-icon>
-                    </template>
-                    <v-list-item-title>Profile</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item @click="() => {}">
-                    <template v-slot:prepend>
-                      <v-icon size="small">mdi-cog</v-icon>
-                    </template>
-                    <v-list-item-title>Settings</v-list-item-title>
-                  </v-list-item>
-                  <v-divider class="my-1" />
-                  <v-list-item @click="logout">
-                    <template v-slot:prepend>
-                      <v-icon size="small">mdi-logout</v-icon>
-                    </template>
-                    <v-list-item-title>Logout</v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
             </div>
           </v-card>
         </div>
diff --git a/layouts/member.vue b/layouts/member.vue
index 9d788da..76c8cbb 100644
--- a/layouts/member.vue
+++ b/layouts/member.vue
@@ -6,7 +6,7 @@
       :expand-on-hover="false"
       permanent
       width="280"
-      rail-width="56"
+      rail-width="80"
       class="enhanced-glass-drawer"
     >
       <!-- Logo Section with Enhanced Glass Effect -->
@@ -75,50 +75,78 @@
       
       <!-- Enhanced Profile Footer -->
       <template v-slot:append>
-        <div class="profile-footer">
-          <v-divider class="mb-3" />
-          <div class="profile-card-footer">
-            <div class="profile-content">
-              <div class="profile-avatar-wrapper">
+        <div class="pa-2">
+          <v-card class="glass-profile-card overflow-visible">
+            <div class="d-flex align-center" :class="miniVariant ? 'flex-column pa-2' : 'pa-3'">
+              <!-- Avatar Section -->
+              <div class="position-relative">
                 <ProfileAvatar
                   v-if="memberData"
                   :member-id="memberData?.member_id"
                   :first-name="memberData?.first_name || user?.firstName"
                   :last-name="memberData?.last_name || user?.lastName"
-                  size="small"
+                  :size="miniVariant ? 'x-small' : 'small'"
+                  :class="miniVariant ? 'mb-2' : 'mr-3'"
                   :show-badge="false"
                 />
-                <div class="online-indicator" />
+                <div v-if="!miniVariant" class="online-indicator" />
               </div>
-              <div class="profile-info">
-                <div class="profile-name">{{ fullName }}</div>
-                <div class="profile-email">{{ email }}</div>
+              
+              <!-- Info Section (Hidden in mini mode) -->
+              <div v-if="!miniVariant" class="flex-grow-1">
+                <div class="text-subtitle-2 font-weight-bold">{{ fullName }}</div>
+                <div class="text-caption text-medium-emphasis">{{ email?.split('@')[0] || 'member' }}</div>
+                <v-chip size="x-small" class="mt-1 glass-badge">Member</v-chip>
+              </div>
+              
+              <!-- Action Buttons -->
+              <div :class="miniVariant ? '' : 'ml-auto'">
+                <v-menu location="top" offset-y>
+                  <template v-slot:activator="{ props }">
+                    <v-btn 
+                      v-bind="props"
+                      :icon="miniVariant"
+                      :size="miniVariant ? 'x-small' : 'small'"
+                      :variant="miniVariant ? 'text' : 'tonal'"
+                      class="profile-menu-btn"
+                    >
+                      <v-icon :size="miniVariant ? 'small' : 'default'">
+                        {{ miniVariant ? 'mdi-dots-vertical' : 'mdi-menu' }}
+                      </v-icon>
+                      <span v-if="!miniVariant" class="ml-1">Menu</span>
+                    </v-btn>
+                  </template>
+                  <v-list density="compact" class="glass-menu" min-width="200">
+                    <v-list-item to="/member/profile" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="primary">mdi-account-circle</v-icon>
+                      </template>
+                      <v-list-item-title>My Profile</v-list-item-title>
+                    </v-list-item>
+                    <v-list-item to="/member/settings" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="info">mdi-cog-outline</v-icon>
+                      </template>
+                      <v-list-item-title>Settings</v-list-item-title>
+                    </v-list-item>
+                    <v-list-item @click="() => {}" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="warning">mdi-bell-outline</v-icon>
+                      </template>
+                      <v-list-item-title>Notifications</v-list-item-title>
+                    </v-list-item>
+                    <v-divider class="my-1 glass-divider" />
+                    <v-list-item @click="handleLogout" class="hover-lift">
+                      <template v-slot:prepend>
+                        <v-icon size="small" color="error">mdi-logout-variant</v-icon>
+                      </template>
+                      <v-list-item-title class="text-error">Sign Out</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
               </div>
-              <v-menu offset-y>
-                <template v-slot:activator="{ props }">
-                  <v-btn 
-                    icon="mdi-dots-vertical" 
-                    size="x-small" 
-                    variant="text" 
-                    v-bind="props"
-                    class="profile-menu-btn"
-                  />
-                </template>
-                <v-list class="glass-dropdown">
-                  <v-list-item 
-                    prepend-icon="mdi-cog" 
-                    title="Settings"
-                    to="/member/settings"
-                  />
-                  <v-list-item 
-                    prepend-icon="mdi-logout" 
-                    title="Logout"
-                    @click="handleLogout"
-                  />
-                </v-list>
-              </v-menu>
             </div>
-          </div>
+          </v-card>
         </div>
       </template>
     </v-navigation-drawer>