diff --git a/Design/glass-morphism-implementation.md b/Design/glass-morphism-implementation.md index a6fffa1..c4344e6 100644 --- a/Design/glass-morphism-implementation.md +++ b/Design/glass-morphism-implementation.md @@ -6,6 +6,9 @@ This document details the glass morphism design patterns implemented in the Mona ## Implementation Date December 2024 +## Latest Update +January 2025 - Enhanced Sidebar Design with Fixed Width + ## Key Changes ### 1. Global SCSS Architecture @@ -18,35 +21,53 @@ Created `assets/scss/main.scss` with comprehensive design system implementation: ### 2. Layout Transformations +#### Enhanced Sidebar Design (All Layouts) +- **Fixed Width**: 280px permanent sidebar (non-collapsible) +- **Enhanced Glass Effects**: 30px blur with improved opacity +- **No Hamburger Menu**: Removed collapse/expand functionality entirely +- **Vertical Profile Card**: Small avatar stacked above user info +- **Animated Navigation**: Hover effects with smooth transitions +- **Glass Badges**: Consistent styling across all access levels +- **Shimmer Animation**: Logo with subtle shimmer effect + #### Admin Layout (`layouts/admin.vue`) -- **Glass Navigation Drawer**: Semi-transparent sidebar with backdrop blur +- **Enhanced Glass Navigation**: Fixed 280px width with enhanced blur - **Gradient App Bar**: Dark gradient from monaco-red-600 to monaco-red-900 - **Glass Icon Buttons**: Semi-transparent with hover effects -- **Floating Logo**: Subtle animation on MonacoUSA logo -- **Glass Cards**: Command palette and dropdowns with glass effects +- **Profile Card**: Vertical layout with admin-specific menu options #### Board Layout (`layouts/board.vue`) -- **Glass Navigation Drawer**: Consistent with admin but lighter gradient +- **Enhanced Glass Navigation**: Consistent 280px fixed width - **Gradient App Bar**: Softer gradient from monaco-red to brown tones - **Glass Search Dialog**: Search overlay with glass card styling -- **Badge Enhancements**: Gradient badges with subtle shadows +- **Profile Card**: Board member profile with vertical layout #### Member Layout (`layouts/member.vue`) -- **Glass Navigation Drawer**: Simplified navigation with glass effects +- **Enhanced Glass Navigation**: Same 280px fixed width design - **Gradient App Bar**: Lightest gradient for member access level - **Streamlined Navigation**: Fewer menu items with clear hierarchy +- **Profile Card**: Member profile with consistent vertical layout ## Glass Morphism Patterns ### Core Mixins ```scss -@mixin glass-effect($bg-opacity: 0.7, $blur: 20px) { - background: rgba(255, 255, 255, $bg-opacity); - backdrop-filter: blur($blur); - -webkit-backdrop-filter: blur($blur); - border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: $shadow-glass; +// Enhanced glass effect with stronger blur +@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 0 rgba(31, 38, 135, 0.37), + inset 0 1px 2px rgba(255, 255, 255, 0.6), + inset 0 -1px 2px rgba(0, 0, 0, 0.05); } ``` @@ -75,10 +96,12 @@ Created `assets/scss/main.scss` with comprehensive design system implementation: 3. **Member**: Lightest gradients (monaco-red-500 range) ### Depth & Layering -- Navigation drawer: 95% opacity, 30px blur +- Navigation drawer: Fixed 280px width, 90% opacity, 30px blur +- Profile card: Vertical layout with small avatar - Dropdowns: 95% opacity, 20px blur - Cards: 80% opacity, 15px blur - Buttons: 10-20% opacity, 10px blur +- No collapsible functionality - permanent fixed sidebar ## Animation Patterns diff --git a/layouts/admin.vue b/layouts/admin.vue index 3f2db1f..3e3c056 100644 --- a/layouts/admin.vue +++ b/layouts/admin.vue @@ -1,36 +1,36 @@ @@ -75,7 +75,7 @@ v-bind="props" prepend-icon="mdi-account-group" title="Member Management" - class="glass-nav-item" + class="glass-nav-item animated-nav-item" /> @@ -106,7 +106,7 @@ v-bind="props" prepend-icon="mdi-currency-usd" title="Financial" - class="glass-nav-item" + class="glass-nav-item animated-nav-item" /> @@ -137,7 +137,7 @@ v-bind="props" prepend-icon="mdi-cog" title="System" - class="glass-nav-item" + class="glass-nav-item animated-nav-item" /> @@ -179,7 +179,7 @@ prepend-icon="mdi-calendar" title="Events Management" value="events" - class="glass-nav-item" + class="glass-nav-item animated-nav-item" /> @@ -188,7 +188,7 @@ prepend-icon="mdi-chart-line" title="Analytics & Insights" value="analytics" - class="glass-nav-item" + class="glass-nav-item animated-nav-item" /> @@ -200,40 +200,68 @@ prepend-icon="mdi-shield-account" title="Board Portal" value="board-view" - class="glass-nav-item" + class="glass-nav-item animated-nav-item" /> - + - - - mdi-menu - - Admin Portal - - - + + +