Implement comprehensive glass morphism UI redesign
All checks were successful
Build And Push Image / docker (push) Successful in 1m56s
All checks were successful
Build And Push Image / docker (push) Successful in 1m56s
- Created global SCSS architecture with Monaco design system - Implemented glass morphism effects across all layouts - Updated admin layout with premium glass effects and dark gradients - Updated board layout with balanced glass effects and medium gradients - Updated member layout with light glass effects and soft gradients - Added floating logo animations and smooth transitions - Implemented role-based visual hierarchy through gradient variations - Created comprehensive documentation for glass morphism patterns - Aligned all changes with established design philosophy in design-system.md Key features: - Glass navigation drawers with backdrop blur - Gradient app bars with role-specific variations - Glass icon buttons with hover effects - Monaco red color spectrum integration - Responsive design with mobile optimizations - Performance-optimized blur effects 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,30 +1,36 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-navigation-drawer v-model="drawer" app width="300">
|
||||
<!-- Logo Section -->
|
||||
<v-list-item class="pa-4 text-center">
|
||||
<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-img
|
||||
src="/MONACOUSA-Flags_376x376.png"
|
||||
width="80"
|
||||
height="80"
|
||||
class="mx-auto mb-2"
|
||||
class="mx-auto mb-2 float-animation"
|
||||
/>
|
||||
<div class="text-h6 font-weight-bold" style="color: #dc2626;">
|
||||
<div class="text-h6 font-weight-bold monaco-red-text">
|
||||
MonacoUSA Portal
|
||||
</div>
|
||||
<div class="text-caption text-error font-weight-bold">ADMINISTRATOR</div>
|
||||
<v-chip
|
||||
size="x-small"
|
||||
class="monaco-chip-gradient mt-1"
|
||||
>
|
||||
ADMINISTRATOR
|
||||
</v-chip>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider />
|
||||
<v-divider class="glass-divider" />
|
||||
|
||||
<!-- Navigation Menu -->
|
||||
<v-list nav density="comfortable">
|
||||
<!-- Navigation Menu with Glass Effects -->
|
||||
<v-list nav density="comfortable" class="glass-nav-list">
|
||||
<!-- Admin Overview -->
|
||||
<v-list-item
|
||||
to="/admin/dashboard"
|
||||
prepend-icon="mdi-view-dashboard"
|
||||
title="Admin Dashboard"
|
||||
value="dashboard"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
|
||||
<!-- User Management -->
|
||||
@@ -34,6 +40,7 @@
|
||||
v-bind="props"
|
||||
prepend-icon="mdi-account-cog"
|
||||
title="User Management"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -41,19 +48,22 @@
|
||||
to="/admin/users"
|
||||
title="All Users"
|
||||
value="users-list"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/admin/users/roles"
|
||||
title="Roles & Permissions"
|
||||
value="roles"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
@click="openKeycloak"
|
||||
title="Keycloak Admin"
|
||||
value="keycloak"
|
||||
class="glass-nav-item-sub"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<v-icon size="small">mdi-open-in-new</v-icon>
|
||||
<v-icon size="small" class="monaco-red-text">mdi-open-in-new</v-icon>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
@@ -65,6 +75,7 @@
|
||||
v-bind="props"
|
||||
prepend-icon="mdi-account-group"
|
||||
title="Member Management"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -72,16 +83,19 @@
|
||||
to="/admin/members"
|
||||
title="All Members"
|
||||
value="members-list"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/admin/members/import"
|
||||
title="Import Members"
|
||||
value="import"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/admin/members/export"
|
||||
title="Export Data"
|
||||
value="export"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
</v-list-group>
|
||||
|
||||
@@ -92,6 +106,7 @@
|
||||
v-bind="props"
|
||||
prepend-icon="mdi-currency-usd"
|
||||
title="Financial"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -99,16 +114,19 @@
|
||||
to="/admin/payments"
|
||||
title="Payment Management"
|
||||
value="payments"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/admin/payments/stripe"
|
||||
title="Stripe Dashboard"
|
||||
value="stripe"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/admin/payments/reports"
|
||||
title="Financial Reports"
|
||||
value="financial-reports"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
</v-list-group>
|
||||
|
||||
@@ -119,6 +137,7 @@
|
||||
v-bind="props"
|
||||
prepend-icon="mdi-cog"
|
||||
title="System"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -126,26 +145,31 @@
|
||||
to="/admin/settings"
|
||||
title="General Settings"
|
||||
value="settings"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/admin/settings/email"
|
||||
title="Email Configuration"
|
||||
value="email"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/admin/settings/security"
|
||||
title="Security Settings"
|
||||
value="security"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/admin/logs"
|
||||
title="System Logs"
|
||||
value="logs"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/admin/backup"
|
||||
title="Backup & Restore"
|
||||
value="backup"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
</v-list-group>
|
||||
|
||||
@@ -155,6 +179,7 @@
|
||||
prepend-icon="mdi-calendar"
|
||||
title="Events Management"
|
||||
value="events"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
|
||||
<!-- Analytics -->
|
||||
@@ -163,64 +188,57 @@
|
||||
prepend-icon="mdi-chart-line"
|
||||
title="Analytics & Insights"
|
||||
value="analytics"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
|
||||
<v-divider class="my-2" />
|
||||
<v-divider class="my-2 glass-divider" />
|
||||
|
||||
<!-- Portal Access -->
|
||||
<v-list-subheader>Portal Access</v-list-subheader>
|
||||
<v-list-subheader class="monaco-subheader">Portal Access</v-list-subheader>
|
||||
<v-list-item
|
||||
to="/board/dashboard"
|
||||
prepend-icon="mdi-shield-account"
|
||||
title="Board Portal"
|
||||
value="board-view"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/member/dashboard"
|
||||
prepend-icon="mdi-account"
|
||||
title="Member Portal"
|
||||
value="member-view"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
</v-list>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Footer with Glass Card -->
|
||||
<template v-slot:append>
|
||||
<div class="pa-4">
|
||||
<v-card
|
||||
color="error"
|
||||
variant="flat"
|
||||
class="text-center pa-3"
|
||||
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">ADMINISTRATOR</div>
|
||||
<div class="text-caption font-weight-bold text-white">FULL ACCESS</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-app-bar app elevation="0" flat>
|
||||
<!-- Admin header with special styling -->
|
||||
<template v-slot:extension>
|
||||
<div class="admin-header-gradient"></div>
|
||||
</template>
|
||||
|
||||
<v-app-bar app elevation="0" flat class="glass-app-bar admin-bar">
|
||||
<!-- Navigation Toggle -->
|
||||
<v-btn
|
||||
icon
|
||||
@click="drawer = !drawer"
|
||||
class="mr-2"
|
||||
color="white"
|
||||
class="mr-2 glass-icon-btn"
|
||||
>
|
||||
<v-icon>mdi-menu</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-toolbar-title class="text-white font-weight-bold d-flex align-center">
|
||||
<v-toolbar-title class="font-weight-bold d-flex align-center text-white">
|
||||
Admin Portal
|
||||
<v-chip
|
||||
size="x-small"
|
||||
color="error"
|
||||
variant="flat"
|
||||
class="ml-2"
|
||||
class="ml-2 glass-chip"
|
||||
>
|
||||
FULL ACCESS
|
||||
</v-chip>
|
||||
@@ -228,12 +246,12 @@
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<!-- System Status Indicator -->
|
||||
<!-- System Status Indicator with Glass Effect -->
|
||||
<v-chip
|
||||
:color="systemStatus === 'healthy' ? 'success' : 'warning'"
|
||||
variant="flat"
|
||||
size="small"
|
||||
class="mr-2"
|
||||
class="mr-2 glass-chip"
|
||||
>
|
||||
<v-icon start size="small">
|
||||
{{ systemStatus === 'healthy' ? 'mdi-check-circle' : 'mdi-alert' }}
|
||||
@@ -241,16 +259,16 @@
|
||||
System {{ systemStatus }}
|
||||
</v-chip>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<!-- Quick Actions with Glass Effects -->
|
||||
<v-btn
|
||||
icon
|
||||
color="white"
|
||||
class="glass-icon-btn"
|
||||
@click="toggleCommandPalette"
|
||||
>
|
||||
<v-icon>mdi-console</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn icon color="white">
|
||||
<v-btn icon class="glass-icon-btn">
|
||||
<v-badge
|
||||
:content="alerts"
|
||||
:value="alerts > 0"
|
||||
@@ -263,7 +281,7 @@
|
||||
<!-- User Menu -->
|
||||
<v-menu offset-y>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon v-bind="props" color="white">
|
||||
<v-btn icon v-bind="props" class="glass-icon-btn">
|
||||
<ProfileAvatar
|
||||
:member-id="memberData?.member_id"
|
||||
:member-name="user?.name"
|
||||
@@ -276,7 +294,7 @@
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-list min-width="250">
|
||||
<v-list min-width="250" class="glass-dropdown">
|
||||
<v-list-item>
|
||||
<v-list-item-title class="font-weight-bold">
|
||||
{{ user?.name || 'Administrator' }}
|
||||
@@ -288,47 +306,46 @@
|
||||
|
||||
<v-list-item>
|
||||
<v-chip
|
||||
color="error"
|
||||
size="x-small"
|
||||
variant="flat"
|
||||
class="monaco-chip-gradient"
|
||||
>
|
||||
ADMINISTRATOR
|
||||
</v-chip>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2" />
|
||||
<v-divider class="my-2 glass-divider" />
|
||||
|
||||
<v-list-item to="/admin/profile">
|
||||
<v-list-item to="/admin/profile" class="glass-dropdown-item">
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Admin Profile</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item to="/board/dashboard">
|
||||
<v-list-item to="/board/dashboard" class="glass-dropdown-item">
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-shield-account</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Board Portal</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item to="/member/dashboard">
|
||||
<v-list-item to="/member/dashboard" class="glass-dropdown-item">
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-account-switch</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Member Portal</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item to="/admin/settings">
|
||||
<v-list-item to="/admin/settings" class="glass-dropdown-item">
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-cog</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>System Settings</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2" />
|
||||
<v-divider class="my-2 glass-divider" />
|
||||
|
||||
<v-list-item @click="handleLogout" class="text-error">
|
||||
<v-list-item @click="handleLogout" class="glass-dropdown-item text-error">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="error">mdi-logout</v-icon>
|
||||
</template>
|
||||
@@ -338,14 +355,14 @@
|
||||
</v-menu>
|
||||
</v-app-bar>
|
||||
|
||||
<!-- Command Palette Dialog -->
|
||||
<!-- Command Palette Dialog with Glass Effect -->
|
||||
<v-dialog v-model="commandPaletteOpen" max-width="600">
|
||||
<v-card>
|
||||
<v-card class="glass-card">
|
||||
<v-card-title class="d-flex align-center">
|
||||
<v-icon class="mr-2">mdi-console</v-icon>
|
||||
<v-icon class="mr-2 monaco-red-text">mdi-console</v-icon>
|
||||
Admin Command Palette
|
||||
<v-spacer />
|
||||
<v-btn icon @click="commandPaletteOpen = false">
|
||||
<v-btn icon @click="commandPaletteOpen = false" class="glass-icon-btn">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
@@ -357,23 +374,24 @@
|
||||
variant="outlined"
|
||||
autofocus
|
||||
@keyup.enter="executeCommand"
|
||||
class="glass-input"
|
||||
/>
|
||||
<div class="text-caption">
|
||||
<div class="text-caption monaco-muted-text">
|
||||
Available commands: clear-cache, rebuild-index, sync-users, export-data
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-main>
|
||||
<v-main class="glass-main">
|
||||
<v-container fluid class="pa-6">
|
||||
<!-- System Alerts Banner -->
|
||||
<!-- System Alerts Banner with Glass Effect -->
|
||||
<v-alert
|
||||
v-if="systemAlerts.length > 0"
|
||||
type="warning"
|
||||
variant="tonal"
|
||||
closable
|
||||
class="mb-4"
|
||||
class="mb-4 glass-alert"
|
||||
>
|
||||
<v-alert-title>System Alerts</v-alert-title>
|
||||
<ul class="mt-2">
|
||||
@@ -452,60 +470,217 @@ watch(width, (newWidth) => {
|
||||
}, { immediate: true });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-header-gradient {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, #991b1b 0%, #450a0a 100%);
|
||||
z-index: -1;
|
||||
<style scoped lang="scss">
|
||||
@import '~/assets/scss/main.scss';
|
||||
|
||||
// Glass Drawer Styles
|
||||
.glass-drawer {
|
||||
@include glass-effect(0.95, 30px);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.v-navigation-drawer {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
|
||||
border-right: 2px solid rgba(153, 27, 27, 0.15);
|
||||
.glass-logo-section {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.05) 0%,
|
||||
rgba(255, 255, 255, 0.8) 100%);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.v-list-item {
|
||||
border-radius: 12px;
|
||||
margin: 4px 12px;
|
||||
transition: all 0.2s ease;
|
||||
.float-animation {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.v-list-item:hover {
|
||||
background-color: rgba(153, 27, 27, 0.05);
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item--active {
|
||||
background: linear-gradient(135deg, rgba(153, 27, 27, 0.2) 0%, rgba(153, 27, 27, 0.1) 100%) !important;
|
||||
color: #991b1b !important;
|
||||
border-left: 3px solid #991b1b;
|
||||
// Monaco Text Colors
|
||||
.monaco-red-text {
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
|
||||
.v-list-item--active .v-icon {
|
||||
color: #991b1b !important;
|
||||
.monaco-muted-text {
|
||||
color: #71717a;
|
||||
}
|
||||
|
||||
.v-list-group__items .v-list-item {
|
||||
// Glass Navigation Items
|
||||
.glass-nav-list {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.glass-nav-item {
|
||||
border-radius: 12px !important;
|
||||
margin: 4px 12px !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.05) !important;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
&.v-list-item--active {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.15) 0%,
|
||||
rgba(220, 38, 38, 0.08) 100%) !important;
|
||||
color: #dc2626 !important;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.glass-nav-item-sub {
|
||||
padding-left: 52px !important;
|
||||
border-radius: 8px !important;
|
||||
margin: 2px 12px 2px 24px !important;
|
||||
transition: all 0.2s ease !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.03) !important;
|
||||
}
|
||||
|
||||
&.v-list-item--active {
|
||||
background: rgba(220, 38, 38, 0.08) !important;
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-subheader {
|
||||
color: #991b1b !important;
|
||||
// Monaco Subheader
|
||||
.monaco-subheader {
|
||||
color: #dc2626 !important;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.v-app-bar {
|
||||
background: transparent !important;
|
||||
// Glass Divider
|
||||
.glass-divider {
|
||||
opacity: 0.2;
|
||||
border-color: rgba(220, 38, 38, 0.2);
|
||||
}
|
||||
|
||||
.v-main {
|
||||
background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
|
||||
// Admin App Bar with Gradient
|
||||
.admin-bar {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.95) 0%,
|
||||
rgba(153, 27, 27, 0.95) 100%) !important;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
// Glass Icon Buttons
|
||||
.glass-icon-btn {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
color: white !important;
|
||||
transition: all 0.3s ease !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
// Glass Chips
|
||||
.glass-chip {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.monaco-chip-gradient {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
|
||||
color: white !important;
|
||||
border: none;
|
||||
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
|
||||
}
|
||||
|
||||
// Glass Dropdown
|
||||
.glass-dropdown {
|
||||
@include glass-effect(0.95, 20px);
|
||||
border-radius: 12px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glass-dropdown-item {
|
||||
transition: all 0.2s ease !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.05) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Glass Input
|
||||
.glass-input {
|
||||
:deep(.v-field) {
|
||||
background: rgba(255, 255, 255, 0.5) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(220, 38, 38, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Glass Alert
|
||||
.glass-alert {
|
||||
@include glass-effect(0.8, 15px);
|
||||
border: 1px solid rgba(245, 158, 11, 0.2) !important;
|
||||
}
|
||||
|
||||
// Glass Main Background
|
||||
.glass-main {
|
||||
background: linear-gradient(180deg,
|
||||
rgba(250, 250, 250, 0.9) 0%,
|
||||
rgba(245, 245, 245, 0.9) 100%);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 50%, rgba(220, 38, 38, 0.03) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(220, 38, 38, 0.03) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 20%, rgba(220, 38, 38, 0.03) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 1024px) {
|
||||
.glass-nav-item {
|
||||
margin: 2px 8px !important;
|
||||
}
|
||||
|
||||
.glass-nav-item-sub {
|
||||
margin: 2px 8px 2px 16px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,30 +1,36 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-navigation-drawer v-model="drawer" app width="280">
|
||||
<!-- Logo Section -->
|
||||
<v-list-item class="pa-4 text-center">
|
||||
<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-img
|
||||
src="/MONACOUSA-Flags_376x376.png"
|
||||
width="80"
|
||||
height="80"
|
||||
class="mx-auto mb-2"
|
||||
class="mx-auto mb-2 float-animation"
|
||||
/>
|
||||
<div class="text-h6 font-weight-bold" style="color: #dc2626;">
|
||||
<div class="text-h6 font-weight-bold monaco-red-text">
|
||||
MonacoUSA Portal
|
||||
</div>
|
||||
<div class="text-caption text-medium-emphasis">Board Portal</div>
|
||||
<v-chip
|
||||
size="x-small"
|
||||
class="monaco-chip-gradient mt-1"
|
||||
>
|
||||
BOARD MEMBER
|
||||
</v-chip>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider />
|
||||
<v-divider class="glass-divider" />
|
||||
|
||||
<!-- Navigation Menu -->
|
||||
<v-list nav density="comfortable">
|
||||
<!-- Navigation Menu with Glass Effects -->
|
||||
<v-list nav density="comfortable" class="glass-nav-list">
|
||||
<!-- Board Overview -->
|
||||
<v-list-item
|
||||
to="/board/dashboard"
|
||||
prepend-icon="mdi-view-dashboard"
|
||||
title="Board Dashboard"
|
||||
value="dashboard"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
|
||||
<!-- Member Management -->
|
||||
@@ -34,6 +40,7 @@
|
||||
v-bind="props"
|
||||
prepend-icon="mdi-account-group"
|
||||
title="Members"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -41,22 +48,26 @@
|
||||
to="/board/members"
|
||||
title="Member Directory"
|
||||
value="member-list"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/board/members/dues"
|
||||
title="Dues Management"
|
||||
value="dues"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/board/members/applications"
|
||||
title="Applications"
|
||||
value="applications"
|
||||
class="glass-nav-item-sub"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<v-badge
|
||||
:content="pendingApplications"
|
||||
:value="pendingApplications > 0"
|
||||
color="error"
|
||||
class="glass-badge"
|
||||
/>
|
||||
</template>
|
||||
</v-list-item>
|
||||
@@ -69,6 +80,7 @@
|
||||
v-bind="props"
|
||||
prepend-icon="mdi-calendar"
|
||||
title="Events & Meetings"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -76,16 +88,19 @@
|
||||
to="/board/events"
|
||||
title="All Events"
|
||||
value="events"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/board/meetings"
|
||||
title="Board Meetings"
|
||||
value="meetings"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/board/meetings/minutes"
|
||||
title="Meeting Minutes"
|
||||
value="minutes"
|
||||
class="glass-nav-item-sub"
|
||||
/>
|
||||
</v-list-group>
|
||||
|
||||
@@ -95,6 +110,7 @@
|
||||
prepend-icon="mdi-chart-box"
|
||||
title="Reports & Analytics"
|
||||
value="reports"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
|
||||
<!-- Governance -->
|
||||
@@ -103,6 +119,7 @@
|
||||
prepend-icon="mdi-gavel"
|
||||
title="Governance"
|
||||
value="governance"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
|
||||
<!-- Communications -->
|
||||
@@ -111,67 +128,61 @@
|
||||
prepend-icon="mdi-email-newsletter"
|
||||
title="Communications"
|
||||
value="communications"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
|
||||
<v-divider class="my-2" />
|
||||
<v-divider class="my-2 glass-divider" />
|
||||
|
||||
<!-- Member Section Access -->
|
||||
<v-list-subheader>Member Portal</v-list-subheader>
|
||||
<v-list-subheader class="monaco-subheader">Member Portal</v-list-subheader>
|
||||
<v-list-item
|
||||
to="/member/dashboard"
|
||||
prepend-icon="mdi-account"
|
||||
title="Member View"
|
||||
value="member-view"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
</v-list>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Footer with Glass Card -->
|
||||
<template v-slot:append>
|
||||
<div class="pa-4">
|
||||
<v-card
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
class="text-center pa-3"
|
||||
class="glass-card glass-card--colored text-center pa-3"
|
||||
>
|
||||
<v-icon size="small" class="mb-1">mdi-shield-account</v-icon>
|
||||
<div class="text-caption font-weight-bold">BOARD ACCESS</div>
|
||||
<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>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-app-bar app elevation="0" flat>
|
||||
<!-- Custom gradient background -->
|
||||
<template v-slot:extension>
|
||||
<div class="board-header-gradient"></div>
|
||||
</template>
|
||||
|
||||
<v-app-bar app elevation="0" flat class="glass-app-bar board-bar">
|
||||
<!-- Navigation Toggle -->
|
||||
<v-btn
|
||||
icon
|
||||
@click="drawer = !drawer"
|
||||
class="mr-2"
|
||||
color="white"
|
||||
class="mr-2 glass-icon-btn"
|
||||
>
|
||||
<v-icon>mdi-menu</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-toolbar-title class="text-white font-weight-bold">
|
||||
<v-toolbar-title class="font-weight-bold text-white">
|
||||
Board Portal
|
||||
</v-toolbar-title>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<!-- Quick Actions with Glass Effects -->
|
||||
<v-btn
|
||||
icon
|
||||
color="white"
|
||||
class="glass-icon-btn"
|
||||
@click="toggleSearch"
|
||||
>
|
||||
<v-icon>mdi-magnify</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn icon color="white">
|
||||
<v-btn icon class="glass-icon-btn">
|
||||
<v-badge
|
||||
:content="notifications"
|
||||
:value="notifications > 0"
|
||||
@@ -184,7 +195,7 @@
|
||||
<!-- User Menu -->
|
||||
<v-menu offset-y>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon v-bind="props" color="white">
|
||||
<v-btn icon v-bind="props" class="glass-icon-btn">
|
||||
<ProfileAvatar
|
||||
:member-id="memberData?.member_id"
|
||||
:member-name="user?.name"
|
||||
@@ -197,7 +208,7 @@
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-list min-width="250">
|
||||
<v-list min-width="250" class="glass-dropdown">
|
||||
<v-list-item>
|
||||
<v-list-item-title class="font-weight-bold">
|
||||
{{ user?.name || 'Board Member' }}
|
||||
@@ -209,40 +220,39 @@
|
||||
|
||||
<v-list-item>
|
||||
<v-chip
|
||||
color="primary"
|
||||
size="x-small"
|
||||
variant="flat"
|
||||
class="monaco-chip-gradient"
|
||||
>
|
||||
BOARD MEMBER
|
||||
</v-chip>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2" />
|
||||
<v-divider class="my-2 glass-divider" />
|
||||
|
||||
<v-list-item to="/board/profile">
|
||||
<v-list-item to="/board/profile" class="glass-dropdown-item">
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Board Profile</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item to="/member/dashboard">
|
||||
<v-list-item to="/member/dashboard" class="glass-dropdown-item">
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-account-switch</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Member Portal</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item to="/board/settings">
|
||||
<v-list-item to="/board/settings" class="glass-dropdown-item">
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-cog</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Settings</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2" />
|
||||
<v-divider class="my-2 glass-divider" />
|
||||
|
||||
<v-list-item @click="handleLogout" class="text-error">
|
||||
<v-list-item @click="handleLogout" class="glass-dropdown-item text-error">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="error">mdi-logout</v-icon>
|
||||
</template>
|
||||
@@ -252,14 +262,14 @@
|
||||
</v-menu>
|
||||
</v-app-bar>
|
||||
|
||||
<!-- Search Overlay -->
|
||||
<!-- Search Overlay with Glass Effect -->
|
||||
<v-dialog v-model="searchOpen" max-width="600" persistent>
|
||||
<v-card>
|
||||
<v-card class="glass-card">
|
||||
<v-card-title class="d-flex align-center">
|
||||
<v-icon class="mr-2">mdi-magnify</v-icon>
|
||||
<v-icon class="mr-2 monaco-red-text">mdi-magnify</v-icon>
|
||||
Search Members
|
||||
<v-spacer />
|
||||
<v-btn icon @click="searchOpen = false">
|
||||
<v-btn icon @click="searchOpen = false" class="glass-icon-btn-dark">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
@@ -271,12 +281,13 @@
|
||||
variant="outlined"
|
||||
autofocus
|
||||
@keyup.enter="performSearch"
|
||||
class="glass-input"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-main>
|
||||
<v-main class="glass-main">
|
||||
<v-container fluid class="pa-6">
|
||||
<slot />
|
||||
</v-container>
|
||||
@@ -339,47 +350,99 @@ watch(width, (newWidth) => {
|
||||
}, { immediate: true });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.board-header-gradient {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, #dc2626 0%, #7c2d12 100%);
|
||||
z-index: -1;
|
||||
<style scoped lang="scss">
|
||||
@import '~/assets/scss/main.scss';
|
||||
|
||||
// Glass Drawer Styles
|
||||
.glass-drawer {
|
||||
@include glass-effect(0.95, 30px);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.v-navigation-drawer {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
|
||||
border-right: 1px solid rgba(220, 38, 38, 0.1);
|
||||
.glass-logo-section {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.05) 0%,
|
||||
rgba(255, 255, 255, 0.8) 100%);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.v-list-item {
|
||||
border-radius: 12px;
|
||||
margin: 4px 12px;
|
||||
transition: all 0.2s ease;
|
||||
.float-animation {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.v-list-item:hover {
|
||||
background-color: rgba(220, 38, 38, 0.04);
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item--active {
|
||||
background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.08) 100%) !important;
|
||||
color: #dc2626 !important;
|
||||
border-left: 3px solid #dc2626;
|
||||
}
|
||||
|
||||
.v-list-item--active .v-icon {
|
||||
// Monaco Text Colors
|
||||
.monaco-red-text {
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
|
||||
.v-list-group__items .v-list-item {
|
||||
// Glass Navigation Items
|
||||
.glass-nav-list {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.glass-nav-item {
|
||||
border-radius: 12px !important;
|
||||
margin: 4px 12px !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.05) !important;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
&.v-list-item--active {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.15) 0%,
|
||||
rgba(220, 38, 38, 0.08) 100%) !important;
|
||||
color: #dc2626 !important;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.glass-nav-item-sub {
|
||||
padding-left: 52px !important;
|
||||
border-radius: 8px !important;
|
||||
margin: 2px 12px 2px 24px !important;
|
||||
transition: all 0.2s ease !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.03) !important;
|
||||
}
|
||||
|
||||
&.v-list-item--active {
|
||||
background: rgba(220, 38, 38, 0.08) !important;
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-subheader {
|
||||
// Monaco Subheader
|
||||
.monaco-subheader {
|
||||
color: #dc2626 !important;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
@@ -387,12 +450,120 @@ watch(width, (newWidth) => {
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.v-app-bar {
|
||||
background: transparent !important;
|
||||
// Glass Divider
|
||||
.glass-divider {
|
||||
opacity: 0.2;
|
||||
border-color: rgba(220, 38, 38, 0.2);
|
||||
}
|
||||
|
||||
.v-main {
|
||||
background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
|
||||
// Board App Bar with Gradient
|
||||
.board-bar {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.9) 0%,
|
||||
rgba(124, 45, 18, 0.9) 100%) !important;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
// Glass Icon Buttons
|
||||
.glass-icon-btn {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
color: white !important;
|
||||
transition: all 0.3s ease !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.glass-icon-btn-dark {
|
||||
background: rgba(0, 0, 0, 0.05) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
color: #71717a !important;
|
||||
transition: all 0.3s ease !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
// Glass Badge
|
||||
.glass-badge {
|
||||
:deep(.v-badge__badge) {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
|
||||
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// Monaco Chip
|
||||
.monaco-chip-gradient {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
|
||||
color: white !important;
|
||||
border: none;
|
||||
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
|
||||
}
|
||||
|
||||
// Glass Dropdown
|
||||
.glass-dropdown {
|
||||
@include glass-effect(0.95, 20px);
|
||||
border-radius: 12px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glass-dropdown-item {
|
||||
transition: all 0.2s ease !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.05) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Glass Input
|
||||
.glass-input {
|
||||
:deep(.v-field) {
|
||||
background: rgba(255, 255, 255, 0.5) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(220, 38, 38, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Glass Main Background
|
||||
.glass-main {
|
||||
background: linear-gradient(180deg,
|
||||
rgba(250, 250, 250, 0.9) 0%,
|
||||
rgba(245, 245, 245, 0.9) 100%);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 50%, rgba(220, 38, 38, 0.03) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(220, 38, 38, 0.03) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 20%, rgba(220, 38, 38, 0.03) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 1024px) {
|
||||
.glass-nav-item {
|
||||
margin: 2px 8px !important;
|
||||
}
|
||||
|
||||
.glass-nav-item-sub {
|
||||
margin: 2px 8px 2px 16px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +1,35 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-navigation-drawer v-model="drawer" app width="280">
|
||||
<!-- Logo Section -->
|
||||
<v-list-item class="pa-4 text-center">
|
||||
<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-img
|
||||
src="/MONACOUSA-Flags_376x376.png"
|
||||
width="80"
|
||||
height="80"
|
||||
class="mx-auto mb-2"
|
||||
class="mx-auto mb-2 float-animation"
|
||||
/>
|
||||
<div class="text-h6 font-weight-bold" style="color: #dc2626;">
|
||||
<div class="text-h6 font-weight-bold monaco-red-text">
|
||||
MonacoUSA Portal
|
||||
</div>
|
||||
<div class="text-caption text-medium-emphasis">Member Portal</div>
|
||||
<v-chip
|
||||
size="x-small"
|
||||
class="monaco-chip-gradient mt-1"
|
||||
>
|
||||
MEMBER
|
||||
</v-chip>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider />
|
||||
<v-divider class="glass-divider" />
|
||||
|
||||
<!-- Navigation Menu -->
|
||||
<v-list nav>
|
||||
<!-- Navigation Menu with Glass Effects -->
|
||||
<v-list nav class="glass-nav-list">
|
||||
<v-list-item
|
||||
to="/member/dashboard"
|
||||
prepend-icon="mdi-view-dashboard"
|
||||
title="Dashboard"
|
||||
value="dashboard"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
|
||||
<v-list-item
|
||||
@@ -31,6 +37,7 @@
|
||||
prepend-icon="mdi-account"
|
||||
title="My Profile"
|
||||
value="profile"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
|
||||
<v-list-item
|
||||
@@ -38,6 +45,7 @@
|
||||
prepend-icon="mdi-calendar"
|
||||
title="Events"
|
||||
value="events"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
|
||||
<v-list-item
|
||||
@@ -45,6 +53,7 @@
|
||||
prepend-icon="mdi-credit-card"
|
||||
title="Payments & Dues"
|
||||
value="payments"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
|
||||
<v-list-item
|
||||
@@ -52,6 +61,7 @@
|
||||
prepend-icon="mdi-book-open-variant"
|
||||
title="Resources"
|
||||
value="resources"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
|
||||
<v-list-item
|
||||
@@ -59,42 +69,41 @@
|
||||
prepend-icon="mdi-contacts"
|
||||
title="Member Directory"
|
||||
value="directory"
|
||||
class="glass-nav-item"
|
||||
/>
|
||||
</v-list>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- Footer with Glass Card -->
|
||||
<template v-slot:append>
|
||||
<div class="pa-4">
|
||||
<v-card
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
class="text-center pa-3"
|
||||
class="glass-card glass-card--colored text-center pa-3"
|
||||
>
|
||||
<v-icon size="small" class="mb-1">mdi-account</v-icon>
|
||||
<div class="text-caption font-weight-bold">MEMBER ACCESS</div>
|
||||
<v-icon size="small" class="mb-1" color="white">mdi-account</v-icon>
|
||||
<div class="text-caption font-weight-bold text-white">MEMBER ACCESS</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-app-bar app color="primary" elevation="0" flat>
|
||||
<v-app-bar app elevation="0" flat class="glass-app-bar member-bar">
|
||||
<!-- Navigation Toggle -->
|
||||
<v-btn
|
||||
icon
|
||||
@click="drawer = !drawer"
|
||||
class="mr-2"
|
||||
class="mr-2 glass-icon-btn"
|
||||
>
|
||||
<v-icon>mdi-menu</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-toolbar-title class="text-white font-weight-bold">
|
||||
<v-toolbar-title class="font-weight-bold text-white">
|
||||
Member Portal
|
||||
</v-toolbar-title>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<v-btn icon color="white">
|
||||
<!-- Quick Actions with Glass Effects -->
|
||||
<v-btn icon class="glass-icon-btn">
|
||||
<v-badge
|
||||
:content="notifications"
|
||||
:value="notifications > 0"
|
||||
@@ -107,7 +116,7 @@
|
||||
<!-- User Menu -->
|
||||
<v-menu offset-y>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon v-bind="props" color="white">
|
||||
<v-btn icon v-bind="props" class="glass-icon-btn">
|
||||
<ProfileAvatar
|
||||
:member-id="memberData?.member_id"
|
||||
:member-name="user?.name"
|
||||
@@ -120,7 +129,7 @@
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-list min-width="250">
|
||||
<v-list min-width="250" class="glass-dropdown">
|
||||
<v-list-item>
|
||||
<v-list-item-title class="font-weight-bold">
|
||||
{{ user?.name || 'Member' }}
|
||||
@@ -132,33 +141,32 @@
|
||||
|
||||
<v-list-item>
|
||||
<v-chip
|
||||
color="info"
|
||||
size="x-small"
|
||||
variant="flat"
|
||||
class="monaco-chip-gradient"
|
||||
>
|
||||
MEMBER
|
||||
</v-chip>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2" />
|
||||
<v-divider class="my-2 glass-divider" />
|
||||
|
||||
<v-list-item to="/member/profile">
|
||||
<v-list-item to="/member/profile" class="glass-dropdown-item">
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>My Profile</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item to="/member/settings">
|
||||
<v-list-item to="/member/settings" class="glass-dropdown-item">
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-cog</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>Settings</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2" />
|
||||
<v-divider class="my-2 glass-divider" />
|
||||
|
||||
<v-list-item @click="handleLogout" class="text-error">
|
||||
<v-list-item @click="handleLogout" class="glass-dropdown-item text-error">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="error">mdi-logout</v-icon>
|
||||
</template>
|
||||
@@ -168,8 +176,8 @@
|
||||
</v-menu>
|
||||
</v-app-bar>
|
||||
|
||||
<v-main>
|
||||
<!-- Dues Payment Banner for Members -->
|
||||
<v-main class="glass-main">
|
||||
<!-- Dues Payment Banner with Glass Effect -->
|
||||
<DuesPaymentBanner />
|
||||
|
||||
<v-container fluid class="pa-6">
|
||||
@@ -215,39 +223,162 @@ watch(width, (newWidth) => {
|
||||
}, { immediate: true });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-navigation-drawer {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.08);
|
||||
<style scoped lang="scss">
|
||||
@import '~/assets/scss/main.scss';
|
||||
|
||||
// Glass Drawer Styles
|
||||
.glass-drawer {
|
||||
@include glass-effect(0.95, 30px);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.v-list-item {
|
||||
border-radius: 12px;
|
||||
margin: 4px 12px;
|
||||
transition: all 0.2s ease;
|
||||
.glass-logo-section {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.05) 0%,
|
||||
rgba(255, 255, 255, 0.8) 100%);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.v-list-item:hover {
|
||||
background-color: rgba(220, 38, 38, 0.04);
|
||||
.float-animation {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.v-list-item--active {
|
||||
background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%) !important;
|
||||
color: #dc2626 !important;
|
||||
border-left: 3px solid #dc2626;
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item--active .v-icon {
|
||||
// Monaco Text Colors
|
||||
.monaco-red-text {
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
|
||||
.v-app-bar {
|
||||
// Glass Navigation Items
|
||||
.glass-nav-list {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.glass-nav-item {
|
||||
border-radius: 12px !important;
|
||||
margin: 4px 12px !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.05) !important;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
&.v-list-item--active {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.15) 0%,
|
||||
rgba(220, 38, 38, 0.08) 100%) !important;
|
||||
color: #dc2626 !important;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Glass Divider
|
||||
.glass-divider {
|
||||
opacity: 0.2;
|
||||
border-color: rgba(220, 38, 38, 0.2);
|
||||
}
|
||||
|
||||
// Member App Bar with Gradient
|
||||
.member-bar {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(239, 68, 68, 0.9) 0%,
|
||||
rgba(220, 38, 38, 0.9) 100%) !important;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
// Glass Icon Buttons
|
||||
.glass-icon-btn {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
color: white !important;
|
||||
transition: all 0.3s ease !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
// Monaco Chip
|
||||
.monaco-chip-gradient {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
|
||||
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15) !important;
|
||||
color: white !important;
|
||||
border: none;
|
||||
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
|
||||
}
|
||||
|
||||
.v-main {
|
||||
background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
|
||||
// Glass Dropdown
|
||||
.glass-dropdown {
|
||||
@include glass-effect(0.95, 20px);
|
||||
border-radius: 12px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glass-dropdown-item {
|
||||
transition: all 0.2s ease !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.05) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Glass Main Background
|
||||
.glass-main {
|
||||
background: linear-gradient(180deg,
|
||||
rgba(250, 250, 250, 0.9) 0%,
|
||||
rgba(245, 245, 245, 0.9) 100%);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 50%, rgba(220, 38, 38, 0.03) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(220, 38, 38, 0.03) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 20%, rgba(220, 38, 38, 0.03) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 1024px) {
|
||||
.glass-nav-item {
|
||||
margin: 2px 8px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user