Enhanced sidebar with beautiful glass morphism effects

- Added enhanced glass morphism mixins with gradients and inner glows
- Implemented collapsible/expandable sidebar with rail mode
- Added smooth animations for navigation items (shimmer, pulse, hover effects)
- Enhanced profile section with online indicator animation
- Implemented tooltip system for collapsed state
- Added localStorage persistence for sidebar state
- Improved transitions with fade effects and sliding indicators
- Updated SCSS with new animation mixins (ripple, icon rotation)

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

Co-Authored-By: Claude <noreply@anthropic.com>

assets/scss/main.scss

@@ -104,6 +104,36 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
   box-shadow: 0 8px 32px rgba($color, 0.1);
 }
 
+// Enhanced glass effect with gradient and inner glow
+@mixin enhanced-glass($opacity: 0.9, $blur: 30px) {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, $opacity * 0.95),
+    rgba(255, 255, 255, $opacity * 0.85),
+    rgba(255, 255, 255, $opacity * 0.75)
+  );
+  backdrop-filter: blur($blur) saturate(180%);
+  -webkit-backdrop-filter: blur($blur) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.08),
+    inset 0 2px 4px rgba(255, 255, 255, 0.6),
+    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
+  position: relative;
+  
+  // Noise texture overlay
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    opacity: 0.03;
+    background-image: 
+      repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);
+    pointer-events: none;
+    border-radius: inherit;
+  }
+}
+
 // ============================================
 // 3. Animation Mixins
 // ============================================
@@ -138,6 +168,65 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
   }
 }
 
+// Ripple effect on click
+@mixin ripple-effect($color: $monaco-red-600) {
+  position: relative;
+  overflow: hidden;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba($color, 0.3);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+  }
+  
+  &:active::after {
+    width: 300px;
+    height: 300px;
+  }
+}
+
+// Icon rotation on hover
+@mixin icon-hover-rotate($deg: 5deg, $duration: $duration-base) {
+  .v-icon {
+    transition: transform $duration $ease-smooth;
+  }
+  
+  &:hover .v-icon {
+    transform: rotate($deg);
+  }
+}
+
+// Sliding active indicator
+@mixin sliding-indicator($color: $monaco-red-600, $width: 4px) {
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: $width;
+    background: linear-gradient(135deg, $color 0%, darken($color, 10%) 100%);
+    border-radius: 0 $radius-base $radius-base 0;
+    transform: scaleY(0);
+    transform-origin: center;
+    transition: transform $duration-base $ease-smooth;
+  }
+  
+  &.active::before,
+  &--active::before {
+    transform: scaleY(1);
+  }
+}
+
 // ============================================
 // 4. Component Classes
 // ============================================

layouts/member.vue

@@ -1,79 +1,125 @@
 <template>
   <v-app>
-    <v-navigation-drawer v-model="drawer" app width="280" class="glass-drawer">
+    <v-navigation-drawer 
-      <!-- Logo Section with Glass Effect -->
+      v-model="drawer" 
-      <v-list-item class="pa-4 text-center glass-logo-section">
+      app 
+      :width="isCollapsed ? '80' : '280'" 
+      :rail="isCollapsed"
+      class="enhanced-glass-drawer"
+    >
+      <!-- Logo Section with Enhanced Glass Effect -->
+      <v-list-item class="logo-section" :class="{ 'logo-section--collapsed': isCollapsed }">
         <v-img 
           src="/MONACOUSA-Flags_376x376.png" 
-          width="80" 
+          :width="isCollapsed ? '40' : '80'" 
-          height="80"
+          :height="isCollapsed ? '40' : '80'"
-          class="mx-auto mb-2" 
+          class="mx-auto logo-image"
+          :class="{ 'mb-2': !isCollapsed }" 
         />
-        <div class="text-h6 font-weight-bold monaco-red-text">
+        <transition name="fade">
-          MonacoUSA Portal
+          <div v-if="!isCollapsed" class="logo-text">
-        </div>
+            <div class="text-h6 font-weight-bold monaco-red-text">
-        <v-chip 
+              MonacoUSA Portal
-          size="x-small" 
+            </div>
-          class="monaco-chip-gradient mt-1"
+            <v-chip 
+              size="x-small" 
+              class="monaco-chip-gradient mt-1"
+            >
+              MEMBER
+            </v-chip>
+          </div>
+        </transition>
+        
+        <!-- Collapse Toggle Button -->
+        <v-btn
+          icon
+          size="small"
+          variant="text"
+          class="collapse-btn"
+          @click="toggleCollapse"
         >
-          MEMBER
+          <v-icon>{{ isCollapsed ? 'mdi-chevron-right' : 'mdi-chevron-left' }}</v-icon>
-        </v-chip>
+        </v-btn>
       </v-list-item>
       
       <v-divider class="glass-divider" />
       
-      <!-- Navigation Menu with Glass Effects -->
+      <!-- Navigation Menu with Enhanced Effects -->
-      <v-list nav class="glass-nav-list">
+      <v-list nav class="enhanced-nav-list">
-        <v-list-item 
+        <template v-for="item in navigationItems" :key="item.value">
-          to="/member/dashboard" 
+          <v-tooltip 
-          prepend-icon="mdi-view-dashboard"
+            :text="item.title" 
-          title="Dashboard"
+            location="right"
-          value="dashboard"
+            :disabled="!isCollapsed"
-          class="glass-nav-item"
+          >
-        />
+            <template v-slot:activator="{ props }">
-
+              <v-list-item 
-        <v-list-item 
+                :to="item.to" 
-          to="/member/profile" 
+                :prepend-icon="item.icon"
-          prepend-icon="mdi-account"
+                :title="!isCollapsed ? item.title : ''"
-          title="My Profile"
+                :value="item.value"
-          value="profile"
+                class="nav-item-enhanced"
-          class="glass-nav-item"
+                v-bind="props"
-        />
+              >
-
+                <template v-if="item.badge" v-slot:append>
-        <v-list-item 
+                  <v-badge
-          to="/member/events" 
+                    :content="item.badge"
-          prepend-icon="mdi-calendar"
+                    color="error"
-          title="Events"
+                    inline
-          value="events"
+                    :dot="isCollapsed"
-          class="glass-nav-item"
+                  />
-        />
+                </template>
-
+              </v-list-item>
-        <v-list-item 
+            </template>
-          to="/member/payments" 
+          </v-tooltip>
-          prepend-icon="mdi-credit-card"
+        </template>
-          title="Payments & Dues"
-          value="payments"
-          class="glass-nav-item"
-        />
-
-        <v-list-item 
-          to="/member/resources" 
-          prepend-icon="mdi-book-open-variant"
-          title="Resources"
-          value="resources"
-          class="glass-nav-item"
-        />
       </v-list>
       
-      <!-- Footer with Glass Card -->
+      <!-- Enhanced Profile Footer -->
       <template v-slot:append>
-        <div class="pa-4">
+        <div class="profile-footer">
-          <v-card 
+          <v-divider class="mb-3" />
-            class="glass-card glass-card--colored text-center pa-3"
+          <div class="profile-card-footer" :class="{ 'profile-card-footer--collapsed': isCollapsed }">
-          >
+            <div class="profile-avatar-wrapper">
-            <v-icon size="small" class="mb-1" color="white">mdi-account</v-icon>
+              <ProfileAvatar
-            <div class="text-caption font-weight-bold text-white">MEMBER ACCESS</div>
+                v-if="memberData"
-          </v-card>
+                :member-id="memberData?.member_id"
+                :first-name="memberData?.first_name || user?.firstName"
+                :last-name="memberData?.last_name || user?.lastName"
+                :size="isCollapsed ? 'small' : 'default'"
+                :show-badge="false"
+              />
+              <div class="online-indicator" />
+            </div>
+            <transition name="fade">
+              <div v-if="!isCollapsed" class="profile-info">
+                <div class="profile-name">{{ fullName }}</div>
+                <div class="profile-email">{{ email }}</div>
+              </div>
+            </transition>
+            <v-menu v-if="!isCollapsed" offset-y>
+              <template v-slot:activator="{ props }">
+                <v-btn 
+                  icon="mdi-dots-vertical" 
+                  size="small" 
+                  variant="text" 
+                  v-bind="props"
+                />
+              </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>
       </template>
     </v-navigation-drawer>
@@ -184,8 +230,44 @@ import type { Member } from '~/utils/types';
 
 const { user, logout } = useAuth();
 const drawer = ref(true);
+const isCollapsed = ref(false);
 const notifications = ref(0);
 
+// Navigation items configuration
+const navigationItems = ref([
+  { 
+    to: '/member/dashboard', 
+    icon: 'mdi-view-dashboard', 
+    title: 'Dashboard', 
+    value: 'dashboard' 
+  },
+  { 
+    to: '/member/profile', 
+    icon: 'mdi-account', 
+    title: 'My Profile', 
+    value: 'profile' 
+  },
+  { 
+    to: '/member/events', 
+    icon: 'mdi-calendar', 
+    title: 'Events', 
+    value: 'events',
+    badge: '3' // Example badge
+  },
+  { 
+    to: '/member/payments', 
+    icon: 'mdi-credit-card', 
+    title: 'Payments & Dues', 
+    value: 'payments' 
+  },
+  { 
+    to: '/member/resources', 
+    icon: 'mdi-book-open-variant', 
+    title: 'Resources', 
+    value: 'resources' 
+  }
+]);
+
 // Fetch member data
 const { data: sessionData } = await useFetch<{ success: boolean; member: Member | null }>('/api/auth/session', { 
   server: false
@@ -193,6 +275,16 @@ const { data: sessionData } = await useFetch<{ success: boolean; member: Member
 
 const memberData = computed<Member | null>(() => sessionData.value?.member || null);
 
+// Computed properties for profile
+const fullName = computed(() => {
+  if (memberData.value) {
+    return `${memberData.value.first_name} ${memberData.value.last_name}`;
+  }
+  return user.value?.name || 'Member';
+});
+
+const email = computed(() => memberData.value?.email || user.value?.email || '');
+
 // Check for notifications
 onMounted(async () => {
   // Check for upcoming events, dues reminders, etc.
@@ -208,6 +300,21 @@ const handleLogout = async () => {
   await logout();
 };
 
+// Toggle collapse state
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value;
+  // Save preference to localStorage
+  localStorage.setItem('sidebarCollapsed', isCollapsed.value.toString());
+};
+
+// Load saved collapse state
+onMounted(() => {
+  const saved = localStorage.getItem('sidebarCollapsed');
+  if (saved === 'true') {
+    isCollapsed.value = true;
+  }
+});
+
 // Responsive drawer behavior
 const { width } = useDisplay();
 watch(width, (newWidth) => {
@@ -218,18 +325,53 @@ watch(width, (newWidth) => {
 <style scoped lang="scss">
 @import '~/assets/scss/main.scss';
 
-// Glass Drawer Styles
+// Enhanced Glass Drawer Styles
-.glass-drawer {
+.enhanced-glass-drawer {
-  @include glass-effect(0.95, 30px);
+  @include enhanced-glass(0.95, 30px);
   border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.glass-logo-section {
+.logo-section {
+  position: relative;
+  padding: 1.5rem;
   background: linear-gradient(135deg, 
     rgba(220, 38, 38, 0.05) 0%, 
     rgba(255, 255, 255, 0.8) 100%);
   border-radius: 16px;
-  margin-bottom: 8px;
+  margin: 0.5rem;
+  margin-bottom: 1rem;
+  transition: all 0.3s ease;
+  
+  &--collapsed {
+    padding: 0.75rem;
+    
+    .logo-image {
+      margin: 0 auto;
+    }
+  }
+  
+  .logo-image {
+    transition: all 0.3s ease;
+  }
+  
+  .logo-text {
+    text-align: center;
+  }
+  
+  .collapse-btn {
+    position: absolute;
+    right: -0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: white;
+    border: 1px solid rgba(220, 38, 38, 0.2);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    
+    &:hover {
+      background: rgba(220, 38, 38, 0.05);
+    }
+  }
 }
 
 // Monaco Text Colors
@@ -237,19 +379,37 @@ watch(width, (newWidth) => {
   color: #dc2626 !important;
 }
 
-// Glass Navigation Items
+// Enhanced Navigation Items
-.glass-nav-list {
+.enhanced-nav-list {
   background: transparent !important;
+  padding: 0.5rem;
 }
 
-.glass-nav-item {
+.nav-item-enhanced {
   border-radius: 12px !important;
-  margin: 4px 12px !important;
+  margin: 4px 8px !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  position: relative;
+  overflow: hidden;
+  @include ripple-effect();
+  @include icon-hover-rotate(10deg);
   
   &:hover {
-    background: rgba(220, 38, 38, 0.05) !important;
+    background: linear-gradient(135deg,
-    transform: translateX(2px);
+      rgba(220, 38, 38, 0.08) 0%,
+      rgba(220, 38, 38, 0.04) 100%) !important;
+    transform: translateX(4px);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(90deg, 
+        transparent 0%,
+        rgba(220, 38, 38, 0.05) 50%,
+        transparent 100%);
+      animation: shimmer 1s ease-in-out;
+    }
   }
   
   &.v-list-item--active {
@@ -257,24 +417,29 @@ watch(width, (newWidth) => {
       rgba(220, 38, 38, 0.15) 0%, 
       rgba(220, 38, 38, 0.08) 100%) !important;
     color: #dc2626 !important;
-    position: relative;
+    @include sliding-indicator();
-    
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 3px;
-      height: 70%;
-      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
-      border-radius: 0 2px 2px 0;
-    }
     
     .v-icon {
       color: #dc2626 !important;
+      animation: pulse 2s ease-in-out infinite;
     }
   }
+  
+  .v-list-item__prepend {
+    .v-icon {
+      transition: all 0.3s ease;
+    }
+  }
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
 }
 
 // Glass Divider
@@ -354,9 +519,101 @@ watch(width, (newWidth) => {
   }
 }
 
+// Profile Footer Styles
+.profile-footer {
+  padding: 0.5rem;
+}
+
+.profile-card-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: linear-gradient(135deg,
+    rgba(255, 255, 255, 0.9),
+    rgba(255, 255, 255, 0.7)
+  );
+  border-radius: 12px;
+  margin: 0.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+  
+  &--collapsed {
+    justify-content: center;
+    padding: 0.75rem;
+  }
+  
+  &:hover {
+    background: linear-gradient(135deg,
+      rgba(255, 255, 255, 0.95),
+      rgba(255, 255, 255, 0.85)
+    );
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.profile-avatar-wrapper {
+  position: relative;
+  flex-shrink: 0;
+  
+  .online-indicator {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 12px;
+    height: 12px;
+    background: #22c55e;
+    border: 2px solid white;
+    border-radius: 50%;
+    animation: pulse-online 2s ease-in-out infinite;
+  }
+}
+
+.profile-info {
+  flex: 1;
+  min-width: 0;
+  
+  .profile-name {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: rgb(31, 41, 55);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .profile-email {
+    font-size: 0.75rem;
+    color: rgb(107, 114, 128);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@keyframes pulse-online {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
+  }
+}
+
+// Fade transition
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 // Responsive adjustments
 @media (max-width: 1024px) {
-  .glass-nav-item {
+  .nav-item-enhanced {
     margin: 2px 8px !important;
   }
 }