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
 // ============================================