From d8453160d33657e54070ed6323fcc8ba6959c7cc Mon Sep 17 00:00:00 2001 From: Matt Date: Sun, 7 Sep 2025 18:04:10 +0200 Subject: [PATCH] Enhance sidebars with premium glass-bolt design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- DESIGN-SYSTEM.md | 114 +++++++++++++++++++++++- layouts/admin.vue | 212 ++++++++++++++++++++++++++++++++++++++++----- layouts/board.vue | 115 ++++++++++++++++++++++-- layouts/member.vue | 92 +++++++++++++++++++- 4 files changed, 499 insertions(+), 34 deletions(-) diff --git a/DESIGN-SYSTEM.md b/DESIGN-SYSTEM.md index d172bc9..6c633eb 100644 --- a/DESIGN-SYSTEM.md +++ b/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 diff --git a/layouts/admin.vue b/layouts/admin.vue index a3a5dbb..8ba4147 100644 --- a/layouts/admin.vue +++ b/layouts/admin.vue @@ -265,6 +265,19 @@ + + +
+ + +
+
+
System Status
+
All services operational
+
+ + +
@@ -454,10 +467,59 @@ watch(width, (newWidth) => { \ No newline at end of file diff --git a/layouts/board.vue b/layouts/board.vue index 84fa8a5..bb7189f 100644 --- a/layouts/board.vue +++ b/layouts/board.vue @@ -523,10 +523,59 @@ watch(width, (newWidth) => {