Fix sidebar collapse functionality for all three layouts
Build And Push Image / docker (push) Successful in 2m7s
Details
Build And Push Image / docker (push) Successful in 2m7s
Details
- Changed from fixed width to dynamic width based on miniVariant state - Replaced v-show with v-if for list groups to properly hide when collapsed - Added proper template conditionals for logo section - Added tooltips for all single navigation items when in rail mode - Fixed badge display to use dot when collapsed - Ensured proper title binding with undefined when collapsed This fixes the sidebar collapse issue across admin, board, and member layouts.
This commit is contained in:
parent
8954621813
commit
f20c1ef96a
|
|
@ -5,28 +5,36 @@
|
||||||
:rail="miniVariant"
|
:rail="miniVariant"
|
||||||
:expand-on-hover="false"
|
:expand-on-hover="false"
|
||||||
permanent
|
permanent
|
||||||
width="280"
|
:width="miniVariant ? 56 : 280"
|
||||||
rail-width="56"
|
|
||||||
class="enhanced-glass-drawer"
|
class="enhanced-glass-drawer"
|
||||||
>
|
>
|
||||||
<!-- Enhanced Logo Section -->
|
<!-- Enhanced Logo Section -->
|
||||||
<v-list-item class="pa-4 text-center enhanced-glass-logo">
|
<v-list-item class="pa-4 text-center enhanced-glass-logo">
|
||||||
<v-img
|
<template v-if="!miniVariant">
|
||||||
src="/MONACOUSA-Flags_376x376.png"
|
<v-img
|
||||||
:width="miniVariant ? 40 : 80"
|
src="/MONACOUSA-Flags_376x376.png"
|
||||||
:height="miniVariant ? 40 : 80"
|
width="80"
|
||||||
class="mx-auto mb-2 shimmer-animation"
|
height="80"
|
||||||
/>
|
class="mx-auto mb-2 shimmer-animation"
|
||||||
<div v-if="!miniVariant" class="text-h6 font-weight-bold text-gradient">
|
/>
|
||||||
MonacoUSA Portal
|
<div class="text-h6 font-weight-bold text-gradient">
|
||||||
</div>
|
MonacoUSA Portal
|
||||||
<v-chip
|
</div>
|
||||||
v-if="!miniVariant"
|
<v-chip
|
||||||
size="x-small"
|
size="x-small"
|
||||||
class="glass-badge mt-1"
|
class="glass-badge mt-1"
|
||||||
>
|
>
|
||||||
ADMINISTRATOR
|
ADMINISTRATOR
|
||||||
</v-chip>
|
</v-chip>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<v-img
|
||||||
|
src="/MONACOUSA-Flags_376x376.png"
|
||||||
|
width="40"
|
||||||
|
height="40"
|
||||||
|
class="mx-auto shimmer-animation"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
<v-divider class="glass-divider mx-3" />
|
<v-divider class="glass-divider mx-3" />
|
||||||
|
|
@ -52,7 +60,7 @@
|
||||||
</v-tooltip>
|
</v-tooltip>
|
||||||
|
|
||||||
<!-- User Management -->
|
<!-- User Management -->
|
||||||
<v-list-group value="users" v-show="!miniVariant">
|
<v-list-group value="users" v-if="!miniVariant">
|
||||||
<template v-slot:activator="{ props }">
|
<template v-slot:activator="{ props }">
|
||||||
<v-list-item
|
<v-list-item
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
|
|
@ -87,7 +95,7 @@
|
||||||
</v-list-group>
|
</v-list-group>
|
||||||
|
|
||||||
<!-- Member Management -->
|
<!-- Member Management -->
|
||||||
<v-list-group value="members" v-show="!miniVariant">
|
<v-list-group value="members" v-if="!miniVariant">
|
||||||
<template v-slot:activator="{ props }">
|
<template v-slot:activator="{ props }">
|
||||||
<v-list-item
|
<v-list-item
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
|
|
@ -118,7 +126,7 @@
|
||||||
</v-list-group>
|
</v-list-group>
|
||||||
|
|
||||||
<!-- Financial Management -->
|
<!-- Financial Management -->
|
||||||
<v-list-group value="financial" v-show="!miniVariant">
|
<v-list-group value="financial" v-if="!miniVariant">
|
||||||
<template v-slot:activator="{ props }">
|
<template v-slot:activator="{ props }">
|
||||||
<v-list-item
|
<v-list-item
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
|
|
@ -149,7 +157,7 @@
|
||||||
</v-list-group>
|
</v-list-group>
|
||||||
|
|
||||||
<!-- System Configuration -->
|
<!-- System Configuration -->
|
||||||
<v-list-group value="system" v-show="!miniVariant">
|
<v-list-group value="system" v-if="!miniVariant">
|
||||||
<template v-slot:activator="{ props }">
|
<template v-slot:activator="{ props }">
|
||||||
<v-list-item
|
<v-list-item
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
|
|
@ -192,41 +200,77 @@
|
||||||
</v-list-group>
|
</v-list-group>
|
||||||
|
|
||||||
<!-- Events Management -->
|
<!-- Events Management -->
|
||||||
<v-list-item
|
<v-tooltip
|
||||||
to="/admin/events"
|
:text="miniVariant ? 'Events Management' : ''"
|
||||||
prepend-icon="mdi-calendar"
|
location="end"
|
||||||
title="Events Management"
|
:disabled="!miniVariant"
|
||||||
value="events"
|
>
|
||||||
class="glass-nav-item animated-nav-item"
|
<template v-slot:activator="{ props }">
|
||||||
/>
|
<v-list-item
|
||||||
|
v-bind="props"
|
||||||
|
to="/admin/events"
|
||||||
|
prepend-icon="mdi-calendar"
|
||||||
|
:title="!miniVariant ? 'Events Management' : undefined"
|
||||||
|
value="events"
|
||||||
|
class="glass-nav-item animated-nav-item"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</v-tooltip>
|
||||||
|
|
||||||
<!-- Analytics -->
|
<!-- Analytics -->
|
||||||
<v-list-item
|
<v-tooltip
|
||||||
to="/admin/analytics"
|
:text="miniVariant ? 'Analytics & Insights' : ''"
|
||||||
prepend-icon="mdi-chart-line"
|
location="end"
|
||||||
title="Analytics & Insights"
|
:disabled="!miniVariant"
|
||||||
value="analytics"
|
>
|
||||||
class="glass-nav-item animated-nav-item"
|
<template v-slot:activator="{ props }">
|
||||||
/>
|
<v-list-item
|
||||||
|
v-bind="props"
|
||||||
|
to="/admin/analytics"
|
||||||
|
prepend-icon="mdi-chart-line"
|
||||||
|
:title="!miniVariant ? 'Analytics & Insights' : undefined"
|
||||||
|
value="analytics"
|
||||||
|
class="glass-nav-item animated-nav-item"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</v-tooltip>
|
||||||
|
|
||||||
<v-divider class="my-2 glass-divider" />
|
<v-divider class="my-2 glass-divider" />
|
||||||
|
|
||||||
<!-- Portal Access -->
|
<!-- Portal Access -->
|
||||||
<v-list-subheader class="monaco-subheader">Portal Access</v-list-subheader>
|
<v-list-subheader v-if="!miniVariant" class="monaco-subheader">Portal Access</v-list-subheader>
|
||||||
<v-list-item
|
<v-tooltip
|
||||||
to="/board/dashboard"
|
:text="miniVariant ? 'Board Portal' : ''"
|
||||||
prepend-icon="mdi-shield-account"
|
location="end"
|
||||||
title="Board Portal"
|
:disabled="!miniVariant"
|
||||||
value="board-view"
|
>
|
||||||
class="glass-nav-item animated-nav-item"
|
<template v-slot:activator="{ props }">
|
||||||
/>
|
<v-list-item
|
||||||
<v-list-item
|
v-bind="props"
|
||||||
to="/member/dashboard"
|
to="/board/dashboard"
|
||||||
prepend-icon="mdi-account"
|
prepend-icon="mdi-shield-account"
|
||||||
title="Member Portal"
|
:title="!miniVariant ? 'Board Portal' : undefined"
|
||||||
value="member-view"
|
value="board-view"
|
||||||
class="glass-nav-item animated-nav-item"
|
class="glass-nav-item animated-nav-item"
|
||||||
/>
|
/>
|
||||||
|
</template>
|
||||||
|
</v-tooltip>
|
||||||
|
<v-tooltip
|
||||||
|
:text="miniVariant ? 'Member Portal' : ''"
|
||||||
|
location="end"
|
||||||
|
:disabled="!miniVariant"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ props }">
|
||||||
|
<v-list-item
|
||||||
|
v-bind="props"
|
||||||
|
to="/member/dashboard"
|
||||||
|
prepend-icon="mdi-account"
|
||||||
|
:title="!miniVariant ? 'Member Portal' : undefined"
|
||||||
|
value="member-view"
|
||||||
|
class="glass-nav-item animated-nav-item"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</v-tooltip>
|
||||||
</v-list>
|
</v-list>
|
||||||
|
|
||||||
<!-- Enhanced Profile Card -->
|
<!-- Enhanced Profile Card -->
|
||||||
|
|
|
||||||
|
|
@ -5,28 +5,36 @@
|
||||||
:rail="miniVariant"
|
:rail="miniVariant"
|
||||||
:expand-on-hover="false"
|
:expand-on-hover="false"
|
||||||
permanent
|
permanent
|
||||||
width="280"
|
:width="miniVariant ? 56 : 280"
|
||||||
rail-width="56"
|
|
||||||
class="enhanced-glass-drawer"
|
class="enhanced-glass-drawer"
|
||||||
>
|
>
|
||||||
<!-- Enhanced Logo Section -->
|
<!-- Enhanced Logo Section -->
|
||||||
<v-list-item class="pa-4 text-center enhanced-glass-logo">
|
<v-list-item class="pa-4 text-center enhanced-glass-logo">
|
||||||
<v-img
|
<template v-if="!miniVariant">
|
||||||
src="/MONACOUSA-Flags_376x376.png"
|
<v-img
|
||||||
:width="miniVariant ? 40 : 80"
|
src="/MONACOUSA-Flags_376x376.png"
|
||||||
:height="miniVariant ? 40 : 80"
|
width="80"
|
||||||
class="mx-auto mb-2 shimmer-animation"
|
height="80"
|
||||||
/>
|
class="mx-auto mb-2 shimmer-animation"
|
||||||
<div v-if="!miniVariant" class="text-h6 font-weight-bold text-gradient">
|
/>
|
||||||
MonacoUSA Portal
|
<div class="text-h6 font-weight-bold text-gradient">
|
||||||
</div>
|
MonacoUSA Portal
|
||||||
<v-chip
|
</div>
|
||||||
v-if="!miniVariant"
|
<v-chip
|
||||||
size="x-small"
|
size="x-small"
|
||||||
class="glass-badge mt-1"
|
class="glass-badge mt-1"
|
||||||
>
|
>
|
||||||
BOARD MEMBER
|
BOARD MEMBER
|
||||||
</v-chip>
|
</v-chip>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<v-img
|
||||||
|
src="/MONACOUSA-Flags_376x376.png"
|
||||||
|
width="40"
|
||||||
|
height="40"
|
||||||
|
class="mx-auto shimmer-animation"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
<v-divider class="glass-divider mx-3" />
|
<v-divider class="glass-divider mx-3" />
|
||||||
|
|
@ -52,7 +60,7 @@
|
||||||
</v-tooltip>
|
</v-tooltip>
|
||||||
|
|
||||||
<!-- Member Management -->
|
<!-- Member Management -->
|
||||||
<v-list-group value="members" v-show="!miniVariant">
|
<v-list-group value="members" v-if="!miniVariant">
|
||||||
<template v-slot:activator="{ props }">
|
<template v-slot:activator="{ props }">
|
||||||
<v-list-item
|
<v-list-item
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
|
|
@ -92,7 +100,7 @@
|
||||||
</v-list-group>
|
</v-list-group>
|
||||||
|
|
||||||
<!-- Events & Meetings -->
|
<!-- Events & Meetings -->
|
||||||
<v-list-group value="events" v-show="!miniVariant">
|
<v-list-group value="events" v-if="!miniVariant">
|
||||||
<template v-slot:activator="{ props }">
|
<template v-slot:activator="{ props }">
|
||||||
<v-list-item
|
<v-list-item
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
|
|
@ -123,43 +131,79 @@
|
||||||
</v-list-group>
|
</v-list-group>
|
||||||
|
|
||||||
<!-- Reports & Analytics -->
|
<!-- Reports & Analytics -->
|
||||||
<v-list-item
|
<v-tooltip
|
||||||
to="/board/reports"
|
:text="miniVariant ? 'Reports & Analytics' : ''"
|
||||||
prepend-icon="mdi-chart-box"
|
location="end"
|
||||||
title="Reports & Analytics"
|
:disabled="!miniVariant"
|
||||||
value="reports"
|
>
|
||||||
class="glass-nav-item animated-nav-item"
|
<template v-slot:activator="{ props }">
|
||||||
/>
|
<v-list-item
|
||||||
|
v-bind="props"
|
||||||
|
to="/board/reports"
|
||||||
|
prepend-icon="mdi-chart-box"
|
||||||
|
:title="!miniVariant ? 'Reports & Analytics' : undefined"
|
||||||
|
value="reports"
|
||||||
|
class="glass-nav-item animated-nav-item"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</v-tooltip>
|
||||||
|
|
||||||
<!-- Governance -->
|
<!-- Governance -->
|
||||||
<v-list-item
|
<v-tooltip
|
||||||
to="/board/governance"
|
:text="miniVariant ? 'Governance' : ''"
|
||||||
prepend-icon="mdi-gavel"
|
location="end"
|
||||||
title="Governance"
|
:disabled="!miniVariant"
|
||||||
value="governance"
|
>
|
||||||
class="glass-nav-item animated-nav-item"
|
<template v-slot:activator="{ props }">
|
||||||
/>
|
<v-list-item
|
||||||
|
v-bind="props"
|
||||||
|
to="/board/governance"
|
||||||
|
prepend-icon="mdi-gavel"
|
||||||
|
:title="!miniVariant ? 'Governance' : undefined"
|
||||||
|
value="governance"
|
||||||
|
class="glass-nav-item animated-nav-item"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</v-tooltip>
|
||||||
|
|
||||||
<!-- Communications -->
|
<!-- Communications -->
|
||||||
<v-list-item
|
<v-tooltip
|
||||||
to="/board/communications"
|
:text="miniVariant ? 'Communications' : ''"
|
||||||
prepend-icon="mdi-email-newsletter"
|
location="end"
|
||||||
title="Communications"
|
:disabled="!miniVariant"
|
||||||
value="communications"
|
>
|
||||||
class="glass-nav-item animated-nav-item"
|
<template v-slot:activator="{ props }">
|
||||||
/>
|
<v-list-item
|
||||||
|
v-bind="props"
|
||||||
|
to="/board/communications"
|
||||||
|
prepend-icon="mdi-email-newsletter"
|
||||||
|
:title="!miniVariant ? 'Communications' : undefined"
|
||||||
|
value="communications"
|
||||||
|
class="glass-nav-item animated-nav-item"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</v-tooltip>
|
||||||
|
|
||||||
<v-divider class="my-2 glass-divider" />
|
<v-divider class="my-2 glass-divider" />
|
||||||
|
|
||||||
<!-- Member Section Access -->
|
<!-- Member Section Access -->
|
||||||
<v-list-subheader class="monaco-subheader">Member Portal</v-list-subheader>
|
<v-list-subheader v-if="!miniVariant" class="monaco-subheader">Member Portal</v-list-subheader>
|
||||||
<v-list-item
|
<v-tooltip
|
||||||
to="/member/dashboard"
|
:text="miniVariant ? 'Member View' : ''"
|
||||||
prepend-icon="mdi-account"
|
location="end"
|
||||||
title="Member View"
|
:disabled="!miniVariant"
|
||||||
value="member-view"
|
>
|
||||||
class="glass-nav-item animated-nav-item"
|
<template v-slot:activator="{ props }">
|
||||||
/>
|
<v-list-item
|
||||||
|
v-bind="props"
|
||||||
|
to="/member/dashboard"
|
||||||
|
prepend-icon="mdi-account"
|
||||||
|
:title="!miniVariant ? 'Member View' : undefined"
|
||||||
|
value="member-view"
|
||||||
|
class="glass-nav-item animated-nav-item"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</v-tooltip>
|
||||||
</v-list>
|
</v-list>
|
||||||
|
|
||||||
<!-- Enhanced Profile Card -->
|
<!-- Enhanced Profile Card -->
|
||||||
|
|
|
||||||
|
|
@ -5,29 +5,38 @@
|
||||||
:rail="miniVariant"
|
:rail="miniVariant"
|
||||||
:expand-on-hover="false"
|
:expand-on-hover="false"
|
||||||
permanent
|
permanent
|
||||||
width="280"
|
:width="miniVariant ? 56 : 280"
|
||||||
rail-width="56"
|
|
||||||
class="enhanced-glass-drawer"
|
class="enhanced-glass-drawer"
|
||||||
>
|
>
|
||||||
<!-- Logo Section with Enhanced Glass Effect -->
|
<!-- Logo Section with Enhanced Glass Effect -->
|
||||||
<v-list-item class="logo-section">
|
<v-list-item class="logo-section">
|
||||||
<v-img
|
<template v-if="!miniVariant">
|
||||||
src="/MONACOUSA-Flags_376x376.png"
|
<v-img
|
||||||
:width="miniVariant ? 40 : 80"
|
src="/MONACOUSA-Flags_376x376.png"
|
||||||
:height="miniVariant ? 40 : 80"
|
width="80"
|
||||||
class="mx-auto logo-image mb-2"
|
height="80"
|
||||||
/>
|
class="mx-auto logo-image mb-2"
|
||||||
<div v-if="!miniVariant" class="logo-text">
|
/>
|
||||||
<div class="text-h6 font-weight-bold monaco-red-text">
|
<div class="logo-text">
|
||||||
MonacoUSA Portal
|
<div class="text-h6 font-weight-bold monaco-red-text">
|
||||||
|
MonacoUSA Portal
|
||||||
|
</div>
|
||||||
|
<v-chip
|
||||||
|
size="x-small"
|
||||||
|
class="monaco-chip-gradient mt-1"
|
||||||
|
>
|
||||||
|
MEMBER
|
||||||
|
</v-chip>
|
||||||
</div>
|
</div>
|
||||||
<v-chip
|
</template>
|
||||||
size="x-small"
|
<template v-else>
|
||||||
class="monaco-chip-gradient mt-1"
|
<v-img
|
||||||
>
|
src="/MONACOUSA-Flags_376x376.png"
|
||||||
MEMBER
|
width="40"
|
||||||
</v-chip>
|
height="40"
|
||||||
</div>
|
class="mx-auto logo-image"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
<v-divider class="glass-divider" />
|
<v-divider class="glass-divider" />
|
||||||
|
|
@ -44,7 +53,7 @@
|
||||||
<v-list-item
|
<v-list-item
|
||||||
:to="item.to"
|
:to="item.to"
|
||||||
:prepend-icon="item.icon"
|
:prepend-icon="item.icon"
|
||||||
:title="!miniVariant ? item.title : ''"
|
:title="!miniVariant ? item.title : undefined"
|
||||||
:value="item.value"
|
:value="item.value"
|
||||||
class="nav-item-enhanced"
|
class="nav-item-enhanced"
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
|
|
@ -54,7 +63,7 @@
|
||||||
:content="item.badge"
|
:content="item.badge"
|
||||||
color="error"
|
color="error"
|
||||||
inline
|
inline
|
||||||
:dot="isCollapsed"
|
:dot="miniVariant"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue