matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove hamburger buttons and implement enhanced sidebar design across all layouts
Build And Push Image / docker (push) Successful in 2m6s Details 

- Removed hamburger menu buttons from all layouts (member, admin, board, dashboard)
- Updated all sidebars to fixed 280px width (non-collapsible)
- Enhanced glass morphism effects with 30px blur
- Implemented vertical profile card with small avatar
- Added consistent animations and hover effects
- Updated design documentation with new specifications
This commit is contained in:
Matt 2025-08-31 15:38:19 +02:00
parent e74f12eaa0
commit 7685cd130f
5 changed files with 163 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
Design/glass-morphism-implementation.md
View File

@ -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

96
layouts/admin.vue
View File

@ -1,36 +1,36 @@
<template>
<v-app>
<v-navigation-drawer v-model="drawer" app width="300" class="glass-drawer">
<!-- Logo Section with Glass Effect -->
<v-list-item class="pa-4 text-center glass-logo-section">
<v-navigation-drawer v-model="drawer" app width="280" permanent class="enhanced-glass-drawer">
<!-- Enhanced Logo Section -->
<v-list-item class="pa-4 text-center enhanced-glass-logo">
<v-img
src="/MONACOUSA-Flags_376x376.png"
width="80"
height="80"
class="mx-auto mb-2 float-animation"
class="mx-auto mb-2 shimmer-animation"
/>
<div class="text-h6 font-weight-bold monaco-red-text">
<div class="text-h6 font-weight-bold text-gradient">
MonacoUSA Portal
</div>
<v-chip
size="x-small"
class="monaco-chip-gradient mt-1"
class="glass-badge mt-1"
>
ADMINISTRATOR
</v-chip>
</v-list-item>
<v-divider class="glass-divider" />
<v-divider class="glass-divider mx-3" />
<!-- Navigation Menu with Glass Effects -->
<v-list nav density="comfortable" class="glass-nav-list">
<!-- Enhanced Navigation Menu -->
<v-list nav density="comfortable" class="enhanced-glass-nav">
<!-- Admin Overview -->
<v-list-item
to="/admin/dashboard"
prepend-icon="mdi-view-dashboard"
title="Admin Dashboard"
value="dashboard"
class="glass-nav-item"
class="glass-nav-item animated-nav-item"
/>
<!-- User Management -->
@ -40,7 +40,7 @@
v-bind="props"
prepend-icon="mdi-account-cog"
title="User Management"
class="glass-nav-item"
class="glass-nav-item animated-nav-item"
/>
</template>
@ -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"
/>
</template>
@ -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"
/>
</template>
@ -137,7 +137,7 @@
v-bind="props"
prepend-icon="mdi-cog"
title="System"
class="glass-nav-item"
class="glass-nav-item animated-nav-item"
/>
</template>
@ -179,7 +179,7 @@
prepend-icon="mdi-calendar"
title="Events Management"
value="events"
class="glass-nav-item"
class="glass-nav-item animated-nav-item"
/>
<!-- Analytics -->
@ -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"
/>
<v-divider class="my-2 glass-divider" />
@ -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"
/>
<v-list-item
to="/member/dashboard"
prepend-icon="mdi-account"
title="Member Portal"
value="member-view"
class="glass-nav-item"
class="glass-nav-item animated-nav-item"
/>
</v-list>
<!-- Footer with Glass Card -->
<!-- Enhanced Profile Card -->
<template v-slot:append>
<div class="pa-4">
<v-card
class="glass-card glass-card--colored text-center pa-3"
>
<v-icon size="small" class="mb-1" color="white">mdi-shield-crown</v-icon>
<div class="text-caption font-weight-bold text-white">FULL ACCESS</div>
<div class="pa-3">
<v-card class="glass-profile-card pa-3">
<div class="d-flex flex-column align-center">
<v-avatar size="small" class="mb-2">
<v-img src="https://randomuser.me/api/portraits/men/85.jpg" />
</v-avatar>
<div class="text-center">
<div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Administrator' }}</div>
<div class="text-caption text-medium-emphasis">{{ user?.email || 'admin@monacousa.org' }}</div>
</div>
<v-menu location="top">
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon="mdi-dots-vertical"
size="x-small"
variant="text"
class="mt-2"
/>
</template>
<v-list density="compact" class="glass-menu">
<v-list-item @click="() => {}">
<template v-slot:prepend>
<v-icon size="small">mdi-account</v-icon>
</template>
<v-list-item-title>Profile</v-list-item-title>
</v-list-item>
<v-list-item @click="() => {}">
<template v-slot:prepend>
<v-icon size="small">mdi-cog</v-icon>
</template>
<v-list-item-title>Settings</v-list-item-title>
</v-list-item>
<v-divider class="my-1" />
<v-list-item @click="logout">
<template v-slot:prepend>
<v-icon size="small">mdi-logout</v-icon>
</template>
<v-list-item-title>Logout</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</v-card>
</div>
</template>
</v-navigation-drawer>
<v-app-bar app elevation="0" flat class="glass-app-bar admin-bar">
<!-- Navigation Toggle -->
<v-btn
icon
@click="drawer = !drawer"
class="mr-2 glass-icon-btn"
>
<v-icon>mdi-menu</v-icon>
</v-btn>
<v-toolbar-title class="font-weight-bold d-flex align-center text-white">
Admin Portal
<v-chip

92
layouts/board.vue
View File

@ -1,36 +1,36 @@
<template>
<v-app>
<v-navigation-drawer v-model="drawer" app width="280" class="glass-drawer">
<!-- Logo Section with Glass Effect -->
<v-list-item class="pa-4 text-center glass-logo-section">
<v-navigation-drawer v-model="drawer" app width="280" permanent class="enhanced-glass-drawer">
<!-- Enhanced Logo Section -->
<v-list-item class="pa-4 text-center enhanced-glass-logo">
<v-img
src="/MONACOUSA-Flags_376x376.png"
width="80"
height="80"
class="mx-auto mb-2 float-animation"
class="mx-auto mb-2 shimmer-animation"
/>
<div class="text-h6 font-weight-bold monaco-red-text">
<div class="text-h6 font-weight-bold text-gradient">
MonacoUSA Portal
</div>
<v-chip
size="x-small"
class="monaco-chip-gradient mt-1"
class="glass-badge mt-1"
>
BOARD MEMBER
</v-chip>
</v-list-item>
<v-divider class="glass-divider" />
<v-divider class="glass-divider mx-3" />
<!-- Navigation Menu with Glass Effects -->
<v-list nav density="comfortable" class="glass-nav-list">
<!-- Enhanced Navigation Menu -->
<v-list nav density="comfortable" class="enhanced-glass-nav">
<!-- Board Overview -->
<v-list-item
to="/board/dashboard"
prepend-icon="mdi-view-dashboard"
title="Board Dashboard"
value="dashboard"
class="glass-nav-item"
class="glass-nav-item animated-nav-item"
/>
<!-- Member Management -->
@ -40,7 +40,7 @@
v-bind="props"
prepend-icon="mdi-account-group"
title="Members"
class="glass-nav-item"
class="glass-nav-item animated-nav-item"
/>
</template>
@ -80,7 +80,7 @@
v-bind="props"
prepend-icon="mdi-calendar"
title="Events & Meetings"
class="glass-nav-item"
class="glass-nav-item animated-nav-item"
/>
</template>
@ -110,7 +110,7 @@
prepend-icon="mdi-chart-box"
title="Reports & Analytics"
value="reports"
class="glass-nav-item"
class="glass-nav-item animated-nav-item"
/>
<!-- Governance -->
@ -119,7 +119,7 @@
prepend-icon="mdi-gavel"
title="Governance"
value="governance"
class="glass-nav-item"
class="glass-nav-item animated-nav-item"
/>
<!-- Communications -->
@ -128,7 +128,7 @@
prepend-icon="mdi-email-newsletter"
title="Communications"
value="communications"
class="glass-nav-item"
class="glass-nav-item animated-nav-item"
/>
<v-divider class="my-2 glass-divider" />
@ -140,33 +140,61 @@
prepend-icon="mdi-account"
title="Member View"
value="member-view"
class="glass-nav-item"
class="glass-nav-item animated-nav-item"
/>
</v-list>
<!-- Footer with Glass Card -->
<!-- Enhanced Profile Card -->
<template v-slot:append>
<div class="pa-4">
<v-card
class="glass-card glass-card--colored text-center pa-3"
>
<v-icon size="small" class="mb-1" color="white">mdi-shield-account</v-icon>
<div class="text-caption font-weight-bold text-white">BOARD ACCESS</div>
<div class="pa-3">
<v-card class="glass-profile-card pa-3">
<div class="d-flex flex-column align-center">
<v-avatar size="small" class="mb-2">
<v-img src="https://randomuser.me/api/portraits/men/85.jpg" />
</v-avatar>
<div class="text-center">
<div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Board Member' }}</div>
<div class="text-caption text-medium-emphasis">{{ user?.email || 'board@monacousa.org' }}</div>
</div>
<v-menu location="top">
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon="mdi-dots-vertical"
size="x-small"
variant="text"
class="mt-2"
/>
</template>
<v-list density="compact" class="glass-menu">
<v-list-item @click="() => {}">
<template v-slot:prepend>
<v-icon size="small">mdi-account</v-icon>
</template>
<v-list-item-title>Profile</v-list-item-title>
</v-list-item>
<v-list-item @click="() => {}">
<template v-slot:prepend>
<v-icon size="small">mdi-cog</v-icon>
</template>
<v-list-item-title>Settings</v-list-item-title>
</v-list-item>
<v-divider class="my-1" />
<v-list-item @click="logout">
<template v-slot:prepend>
<v-icon size="small">mdi-logout</v-icon>
</template>
<v-list-item-title>Logout</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</v-card>
</div>
</template>
</v-navigation-drawer>
<v-app-bar app elevation="0" flat class="glass-app-bar board-bar">
<!-- Navigation Toggle -->
<v-btn
icon
@click="drawer = !drawer"
class="mr-2 glass-icon-btn"
>
<v-icon>mdi-menu</v-icon>
</v-btn>
<v-toolbar-title class="font-weight-bold text-white">
Board Portal
</v-toolbar-title>

16
layouts/dashboard.vue
View File

@ -97,18 +97,12 @@
</v-navigation-drawer>
<v-app-bar app color="primary" elevation="2">
<!-- MonacoUSA Logo as Navigation Toggle -->
<v-btn
variant="text"
@click="drawer = !drawer"
<!-- MonacoUSA Logo -->
<MonacoUSALogo
size="small"
variant="white"
class="mr-2"
>
<MonacoUSALogo
size="small"
variant="white"
clickable
/>
</v-btn>
/>
<v-toolbar-title class="text-white font-weight-bold">
MonacoUSA Portal

9
layouts/member.vue
View File

@ -111,15 +111,6 @@
</v-navigation-drawer>
<v-app-bar app elevation="0" flat class="glass-app-bar member-bar">
<!-- Navigation Toggle -->
<v-btn
icon
@click="drawer = !drawer"
class="mr-2 glass-icon-btn"
>
<v-icon>mdi-menu</v-icon>
</v-btn>
<v-toolbar-title class="font-weight-bold text-white">
Member Portal
</v-toolbar-title>