Enhance sidebars with premium glass-bolt design

- Added CSS variables for consistent glass-bolt theming
- Enhanced glass drawer with gradient backgrounds (70-85% opacity)
- Added floating orb decorations with smooth animations
- Implemented shimmer effects on navigation item hover
- Added system status indicator to admin sidebar
- Enhanced animations (float, subtle-pulse, pulse-dot)
- Applied premium styling to all three layouts (admin, board, member)
- Preserved all existing functionality while overlaying new design
- Based on BoltAI mockup inspiration for premium aesthetic

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

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

DESIGN-SYSTEM.md

@@ -188,7 +188,7 @@ $gray-900: #18181b;
 ```
 ┌─────────────────────────────────────┐
 │ Sidebar │      Main Content         │
-│  250px  │       Flexible            │
+│  280px  │       Flexible            │
 │         │ ┌───────────────────────┐ │
 │         │ │    Header Section     │ │
 │         │ ├───────────────────────┤ │
@@ -199,6 +199,118 @@ $gray-900: #18181b;
 └─────────────────────────────────────┘
 ```
 
+#### Enhanced Sidebar Design
+```scss
+.enhanced-glass-sidebar {
+  // Subtle glass background with gradient
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.6) 0%, 
+    rgba(248, 249, 250, 0.8) 100%);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-right: 1px solid rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+  
+  // Decorative floating orbs (non-interactive)
+  .floating-orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(30px);
+    pointer-events: none;
+    animation: float 8s ease-in-out infinite;
+    
+    &.orb-1 {
+      top: 20%;
+      right: -50px;
+      width: 100px;
+      height: 100px;
+      background: radial-gradient(circle, 
+        rgba(220, 38, 38, 0.05), transparent);
+    }
+    
+    &.orb-2 {
+      bottom: 30%;
+      left: -30px;
+      width: 80px;
+      height: 80px;
+      background: radial-gradient(circle, 
+        rgba(220, 38, 38, 0.03), transparent);
+      animation-delay: 3s;
+    }
+  }
+}
+
+// Navigation Items with Premium Feel
+.nav-item {
+  border-radius: 12px;
+  margin: 6px 16px;
+  padding: 12px 16px;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  // Shimmer effect on hover
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, 
+      transparent, 
+      rgba(255, 255, 255, 0.1), 
+      transparent);
+    pointer-events: none;
+    transition: left 0.5s ease;
+  }
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.05);
+    transform: translateX(2px);
+    
+    &::after {
+      left: 100%;
+    }
+  }
+  
+  &.active {
+    background: rgba(220, 38, 38, 0.1);
+    border-left: 3px solid $monaco-red-600;
+    transform: scale(1.02);
+    
+    .icon {
+      animation: subtle-pulse 3s ease-in-out infinite;
+    }
+  }
+}
+
+// System Status Indicator
+.system-status {
+  margin-top: auto;
+  padding: 1rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  
+  .status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background: rgba(16, 185, 129, 0.05);
+    border-radius: 8px;
+    
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      background: #10b981;
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+    }
+  }
+}
+```
+
 ### 6. Animation & Transitions
 
 #### Hover Effects

layouts/admin.vue

@@ -265,6 +265,19 @@
             </div>
           </v-card>
         </div>
+        
+        <!-- System Status Indicator -->
+        <div class="system-status pa-4 mt-auto">
+          <v-card class="status-indicator-card" elevation="0">
+            <v-card-text class="d-flex align-center pa-3">
+              <div class="status-dot"></div>
+              <div class="ml-3">
+                <div class="text-caption font-weight-medium">System Status</div>
+                <div class="text-caption monaco-muted-text">All services operational</div>
+              </div>
+            </v-card-text>
+          </v-card>
+        </div>
       </template>
     </v-navigation-drawer>
     
@@ -454,10 +467,59 @@ watch(width, (newWidth) => {
 <style scoped lang="scss">
 @import '~/assets/scss/main.scss';
 
-// Glass Drawer Styles
+// CSS Variables for Glass Bolt Theme
+:root {
+  --glass-bg: rgba(255, 255, 255, 0.6);
+  --glass-bg-ultra: rgba(255, 255, 255, 0.8);
+  --glass-blur: 4px;
+  --glass-blur-heavy: 10px;
+  --glass-border: rgba(0, 0, 0, 0.05);
+  --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --monaco-red: #dc2626;
+  --monaco-red-dark: #b91c1c;
+  --monaco-red-light: rgba(220, 38, 38, 0.1);
+}
+
+// Enhanced Glass Drawer with Premium Feel
 .glass-drawer {
-  @include glass-effect(0.95, 30px);
+  background: linear-gradient(135deg, 
-  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
+    rgba(255, 255, 255, 0.7) 0%, 
+    rgba(248, 249, 250, 0.85) 100%) !important;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-right: 1px solid var(--glass-border) !important;
+  position: relative;
+  overflow: hidden;
+  
+  // Floating Orbs (decorative)
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(40px);
+    pointer-events: none;
+    animation: float 8s ease-in-out infinite;
+  }
+  
+  &::before {
+    top: 20%;
+    right: -60px;
+    width: 120px;
+    height: 120px;
+    background: radial-gradient(circle, 
+      rgba(220, 38, 38, 0.06), transparent);
+  }
+  
+  &::after {
+    bottom: 30%;
+    left: -40px;
+    width: 100px;
+    height: 100px;
+    background: radial-gradient(circle, 
+      rgba(220, 38, 38, 0.04), transparent);
+    animation-delay: 3s;
+  }
 }
 
 .glass-logo-section {
@@ -474,10 +536,38 @@ watch(width, (newWidth) => {
 
 @keyframes float {
   0%, 100% {
-    transform: translateY(0);
+    transform: translateY(0) translateX(0);
+  }
+  25% {
+    transform: translateY(-15px) translateX(5px);
   }
   50% {
-    transform: translateY(-10px);
+    transform: translateY(-10px) translateX(-5px);
+  }
+  75% {
+    transform: translateY(-5px) translateX(3px);
+  }
+}
+
+@keyframes subtle-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes pulse-dot {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.2);
   }
 }
 
@@ -497,35 +587,50 @@ watch(width, (newWidth) => {
 
 .glass-nav-item {
   border-radius: 12px !important;
-  margin: 4px 12px !important;
+  margin: 6px 16px !important;
+  padding: 12px 16px !important;
+  position: relative;
+  overflow: hidden;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
   
+  // Shimmer effect setup
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, 
+      transparent, 
+      rgba(255, 255, 255, 0.15), 
+      transparent);
+    pointer-events: none;
+    transition: left 0.5s ease;
+  }
+  
   &:hover {
     background: rgba(220, 38, 38, 0.05) !important;
-    transform: translateX(2px);
+    transform: translateX(3px);
+    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
+    
+    &::after {
+      left: 100%;
+    }
   }
   
   &.v-list-item--active {
     background: linear-gradient(135deg, 
-      rgba(220, 38, 38, 0.15) 0%, 
+      rgba(220, 38, 38, 0.12) 0%, 
       rgba(220, 38, 38, 0.08) 100%) !important;
-    color: #dc2626 !important;
+    color: var(--monaco-red) !important;
-    position: relative;
+    transform: scale(1.02);
-    
+    border-left: 3px solid var(--monaco-red);
-    &::before {
+    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.15);
-      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;
+      color: var(--monaco-red) !important;
+      animation: subtle-pulse 3s ease-in-out infinite;
     }
   }
 }
@@ -664,4 +769,65 @@ watch(width, (newWidth) => {
     margin: 2px 8px 2px 16px !important;
   }
 }
+
+// System Status Indicator Styles
+.system-status {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(to top, 
+    rgba(255, 255, 255, 0.9), 
+    rgba(255, 255, 255, 0));
+  padding-top: 2rem !important;
+}
+
+.status-indicator-card {
+  background: rgba(16, 185, 129, 0.05) !important;
+  border: 1px solid rgba(16, 185, 129, 0.1);
+  border-radius: 12px !important;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: rgba(16, 185, 129, 0.08) !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
+  }
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  background: #10b981;
+  border-radius: 50%;
+  animation: pulse-dot 2s infinite;
+  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+}
+
+// Premium Glass Effects on Navigation Items
+.glass-nav-item,
+.glass-nav-item-sub {
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.05) 50%,
+      transparent 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+    border-radius: inherit;
+  }
+  
+  &:hover::before {
+    opacity: 1;
+  }
+}
 </style>

layouts/board.vue

@@ -523,10 +523,59 @@ watch(width, (newWidth) => {
 <style scoped lang="scss">
 @import '~/assets/scss/main.scss';
 
-// Glass Drawer Styles
+// CSS Variables for Glass Bolt Theme
+:root {
+  --glass-bg: rgba(255, 255, 255, 0.6);
+  --glass-bg-ultra: rgba(255, 255, 255, 0.8);
+  --glass-blur: 4px;
+  --glass-blur-heavy: 10px;
+  --glass-border: rgba(0, 0, 0, 0.05);
+  --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --monaco-red: #dc2626;
+  --monaco-red-dark: #b91c1c;
+  --monaco-red-light: rgba(220, 38, 38, 0.1);
+}
+
+// Enhanced Glass Drawer with Premium Feel
 .glass-drawer {
-  @include glass-effect(0.95, 30px);
+  background: linear-gradient(135deg, 
-  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
+    rgba(255, 255, 255, 0.7) 0%, 
+    rgba(248, 249, 250, 0.85) 100%) !important;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-right: 1px solid var(--glass-border) !important;
+  position: relative;
+  overflow: hidden;
+  
+  // Floating Orbs (decorative)
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(40px);
+    pointer-events: none;
+    animation: float 8s ease-in-out infinite;
+  }
+  
+  &::before {
+    top: 20%;
+    right: -60px;
+    width: 120px;
+    height: 120px;
+    background: radial-gradient(circle, 
+      rgba(220, 38, 38, 0.06), transparent);
+  }
+  
+  &::after {
+    bottom: 30%;
+    left: -40px;
+    width: 100px;
+    height: 100px;
+    background: radial-gradient(circle, 
+      rgba(220, 38, 38, 0.04), transparent);
+    animation-delay: 3s;
+  }
 }
 
 .glass-logo-section {
@@ -543,10 +592,38 @@ watch(width, (newWidth) => {
 
 @keyframes float {
   0%, 100% {
-    transform: translateY(0);
+    transform: translateY(0) translateX(0);
+  }
+  25% {
+    transform: translateY(-15px) translateX(5px);
   }
   50% {
-    transform: translateY(-10px);
+    transform: translateY(-10px) translateX(-5px);
+  }
+  75% {
+    transform: translateY(-5px) translateX(3px);
+  }
+}
+
+@keyframes subtle-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes pulse-dot {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.2);
   }
 }
 
@@ -562,12 +639,36 @@ watch(width, (newWidth) => {
 
 .glass-nav-item {
   border-radius: 12px !important;
-  margin: 4px 12px !important;
+  margin: 6px 16px !important;
+  padding: 12px 16px !important;
+  position: relative;
+  overflow: hidden;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
   
+  // Shimmer effect setup
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, 
+      transparent, 
+      rgba(255, 255, 255, 0.15), 
+      transparent);
+    pointer-events: none;
+    transition: left 0.5s ease;
+  }
+  
   &:hover {
     background: rgba(220, 38, 38, 0.05) !important;
-    transform: translateX(2px);
+    transform: translateX(3px);
+    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
+    
+    &::after {
+      left: 100%;
+    }
   }
   
   &.v-list-item--active {

layouts/member.vue

@@ -321,11 +321,60 @@ watch(width, (newWidth) => {
 <style scoped lang="scss">
 @import '~/assets/scss/main.scss';
 
-// Enhanced Glass Drawer Styles
+// CSS Variables for Glass Bolt Theme
+:root {
+  --glass-bg: rgba(255, 255, 255, 0.6);
+  --glass-bg-ultra: rgba(255, 255, 255, 0.8);
+  --glass-blur: 4px;
+  --glass-blur-heavy: 10px;
+  --glass-border: rgba(0, 0, 0, 0.05);
+  --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --monaco-red: #dc2626;
+  --monaco-red-dark: #b91c1c;
+  --monaco-red-light: rgba(220, 38, 38, 0.1);
+}
+
+// Enhanced Glass Drawer with Premium Feel
 .enhanced-glass-drawer {
-  @include enhanced-glass(0.95, 30px);
+  background: linear-gradient(135deg, 
-  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
+    rgba(255, 255, 255, 0.7) 0%, 
+    rgba(248, 249, 250, 0.85) 100%) !important;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-right: 1px solid var(--glass-border) !important;
+  position: relative;
+  overflow: hidden;
   transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  // Floating Orbs (decorative)
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(40px);
+    pointer-events: none;
+    animation: float 8s ease-in-out infinite;
+  }
+  
+  &::before {
+    top: 20%;
+    right: -60px;
+    width: 120px;
+    height: 120px;
+    background: radial-gradient(circle, 
+      rgba(220, 38, 38, 0.06), transparent);
+  }
+  
+  &::after {
+    bottom: 30%;
+    left: -40px;
+    width: 100px;
+    height: 100px;
+    background: radial-gradient(circle, 
+      rgba(220, 38, 38, 0.04), transparent);
+    animation-delay: 3s;
+  }
 }
 
 .logo-section {
@@ -439,6 +488,43 @@ watch(width, (newWidth) => {
   50% { transform: scale(1.1); }
 }
 
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0) translateX(0);
+  }
+  25% {
+    transform: translateY(-15px) translateX(5px);
+  }
+  50% {
+    transform: translateY(-10px) translateX(-5px);
+  }
+  75% {
+    transform: translateY(-5px) translateX(3px);
+  }
+}
+
+@keyframes subtle-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes pulse-dot {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.2);
+  }
+}
+
 // Glass Divider
 .glass-divider {
   opacity: 0.2;