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"
|
||||
:expand-on-hover="false"
|
||||
permanent
|
||||
width="280"
|
||||
rail-width="56"
|
||||
:width="miniVariant ? 56 : 280"
|
||||
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="miniVariant ? 40 : 80"
|
||||
:height="miniVariant ? 40 : 80"
|
||||
class="mx-auto mb-2 shimmer-animation"
|
||||
/>
|
||||
<div v-if="!miniVariant" class="text-h6 font-weight-bold text-gradient">
|
||||
MonacoUSA Portal
|
||||
</div>
|
||||
<v-chip
|
||||
v-if="!miniVariant"
|
||||
size="x-small"
|
||||
class="glass-badge mt-1"
|
||||
>
|
||||
ADMINISTRATOR
|
||||
</v-chip>
|
||||
<template v-if="!miniVariant">
|
||||
<v-img
|
||||
src="/MONACOUSA-Flags_376x376.png"
|
||||
width="80"
|
||||
height="80"
|
||||
class="mx-auto mb-2 shimmer-animation"
|
||||
/>
|
||||
<div class="text-h6 font-weight-bold text-gradient">
|
||||
MonacoUSA Portal
|
||||
</div>
|
||||
<v-chip
|
||||
size="x-small"
|
||||
class="glass-badge mt-1"
|
||||
>
|
||||
ADMINISTRATOR
|
||||
</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-divider class="glass-divider mx-3" />
|
||||
|
|
@ -52,7 +60,7 @@
|
|||
</v-tooltip>
|
||||
|
||||
<!-- User Management -->
|
||||
<v-list-group value="users" v-show="!miniVariant">
|
||||
<v-list-group value="users" v-if="!miniVariant">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
|
|
@ -87,7 +95,7 @@
|
|||
</v-list-group>
|
||||
|
||||
<!-- Member Management -->
|
||||
<v-list-group value="members" v-show="!miniVariant">
|
||||
<v-list-group value="members" v-if="!miniVariant">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
|
|
@ -118,7 +126,7 @@
|
|||
</v-list-group>
|
||||
|
||||
<!-- Financial Management -->
|
||||
<v-list-group value="financial" v-show="!miniVariant">
|
||||
<v-list-group value="financial" v-if="!miniVariant">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
|
|
@ -149,7 +157,7 @@
|
|||
</v-list-group>
|
||||
|
||||
<!-- System Configuration -->
|
||||
<v-list-group value="system" v-show="!miniVariant">
|
||||
<v-list-group value="system" v-if="!miniVariant">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
|
|
@ -192,41 +200,77 @@
|
|||
</v-list-group>
|
||||
|
||||
<!-- Events Management -->
|
||||
<v-list-item
|
||||
to="/admin/events"
|
||||
prepend-icon="mdi-calendar"
|
||||
title="Events Management"
|
||||
value="events"
|
||||
class="glass-nav-item animated-nav-item"
|
||||
/>
|
||||
<v-tooltip
|
||||
:text="miniVariant ? 'Events Management' : ''"
|
||||
location="end"
|
||||
:disabled="!miniVariant"
|
||||
>
|
||||
<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 -->
|
||||
<v-list-item
|
||||
to="/admin/analytics"
|
||||
prepend-icon="mdi-chart-line"
|
||||
title="Analytics & Insights"
|
||||
value="analytics"
|
||||
class="glass-nav-item animated-nav-item"
|
||||
/>
|
||||
<v-tooltip
|
||||
:text="miniVariant ? 'Analytics & Insights' : ''"
|
||||
location="end"
|
||||
:disabled="!miniVariant"
|
||||
>
|
||||
<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" />
|
||||
|
||||
<!-- Portal Access -->
|
||||
<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 animated-nav-item"
|
||||
/>
|
||||
<v-list-item
|
||||
to="/member/dashboard"
|
||||
prepend-icon="mdi-account"
|
||||
title="Member Portal"
|
||||
value="member-view"
|
||||
class="glass-nav-item animated-nav-item"
|
||||
/>
|
||||
<v-list-subheader v-if="!miniVariant" class="monaco-subheader">Portal Access</v-list-subheader>
|
||||
<v-tooltip
|
||||
:text="miniVariant ? 'Board Portal' : ''"
|
||||
location="end"
|
||||
:disabled="!miniVariant"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
to="/board/dashboard"
|
||||
prepend-icon="mdi-shield-account"
|
||||
:title="!miniVariant ? 'Board Portal' : undefined"
|
||||
value="board-view"
|
||||
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>
|
||||
|
||||
<!-- Enhanced Profile Card -->
|
||||
|
|
|
|||
|
|
@ -5,28 +5,36 @@
|
|||
:rail="miniVariant"
|
||||
:expand-on-hover="false"
|
||||
permanent
|
||||
width="280"
|
||||
rail-width="56"
|
||||
:width="miniVariant ? 56 : 280"
|
||||
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="miniVariant ? 40 : 80"
|
||||
:height="miniVariant ? 40 : 80"
|
||||
class="mx-auto mb-2 shimmer-animation"
|
||||
/>
|
||||
<div v-if="!miniVariant" class="text-h6 font-weight-bold text-gradient">
|
||||
MonacoUSA Portal
|
||||
</div>
|
||||
<v-chip
|
||||
v-if="!miniVariant"
|
||||
size="x-small"
|
||||
class="glass-badge mt-1"
|
||||
>
|
||||
BOARD MEMBER
|
||||
</v-chip>
|
||||
<template v-if="!miniVariant">
|
||||
<v-img
|
||||
src="/MONACOUSA-Flags_376x376.png"
|
||||
width="80"
|
||||
height="80"
|
||||
class="mx-auto mb-2 shimmer-animation"
|
||||
/>
|
||||
<div class="text-h6 font-weight-bold text-gradient">
|
||||
MonacoUSA Portal
|
||||
</div>
|
||||
<v-chip
|
||||
size="x-small"
|
||||
class="glass-badge mt-1"
|
||||
>
|
||||
BOARD MEMBER
|
||||
</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-divider class="glass-divider mx-3" />
|
||||
|
|
@ -52,7 +60,7 @@
|
|||
</v-tooltip>
|
||||
|
||||
<!-- Member Management -->
|
||||
<v-list-group value="members" v-show="!miniVariant">
|
||||
<v-list-group value="members" v-if="!miniVariant">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
|
|
@ -92,7 +100,7 @@
|
|||
</v-list-group>
|
||||
|
||||
<!-- Events & Meetings -->
|
||||
<v-list-group value="events" v-show="!miniVariant">
|
||||
<v-list-group value="events" v-if="!miniVariant">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
|
|
@ -123,43 +131,79 @@
|
|||
</v-list-group>
|
||||
|
||||
<!-- Reports & Analytics -->
|
||||
<v-list-item
|
||||
to="/board/reports"
|
||||
prepend-icon="mdi-chart-box"
|
||||
title="Reports & Analytics"
|
||||
value="reports"
|
||||
class="glass-nav-item animated-nav-item"
|
||||
/>
|
||||
<v-tooltip
|
||||
:text="miniVariant ? 'Reports & Analytics' : ''"
|
||||
location="end"
|
||||
:disabled="!miniVariant"
|
||||
>
|
||||
<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 -->
|
||||
<v-list-item
|
||||
to="/board/governance"
|
||||
prepend-icon="mdi-gavel"
|
||||
title="Governance"
|
||||
value="governance"
|
||||
class="glass-nav-item animated-nav-item"
|
||||
/>
|
||||
<v-tooltip
|
||||
:text="miniVariant ? 'Governance' : ''"
|
||||
location="end"
|
||||
:disabled="!miniVariant"
|
||||
>
|
||||
<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 -->
|
||||
<v-list-item
|
||||
to="/board/communications"
|
||||
prepend-icon="mdi-email-newsletter"
|
||||
title="Communications"
|
||||
value="communications"
|
||||
class="glass-nav-item animated-nav-item"
|
||||
/>
|
||||
<v-tooltip
|
||||
:text="miniVariant ? 'Communications' : ''"
|
||||
location="end"
|
||||
:disabled="!miniVariant"
|
||||
>
|
||||
<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" />
|
||||
|
||||
<!-- Member Section Access -->
|
||||
<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 animated-nav-item"
|
||||
/>
|
||||
<v-list-subheader v-if="!miniVariant" class="monaco-subheader">Member Portal</v-list-subheader>
|
||||
<v-tooltip
|
||||
:text="miniVariant ? 'Member View' : ''"
|
||||
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 View' : undefined"
|
||||
value="member-view"
|
||||
class="glass-nav-item animated-nav-item"
|
||||
/>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</v-list>
|
||||
|
||||
<!-- Enhanced Profile Card -->
|
||||
|
|
|
|||
|
|
@ -5,29 +5,38 @@
|
|||
:rail="miniVariant"
|
||||
:expand-on-hover="false"
|
||||
permanent
|
||||
width="280"
|
||||
rail-width="56"
|
||||
:width="miniVariant ? 56 : 280"
|
||||
class="enhanced-glass-drawer"
|
||||
>
|
||||
<!-- Logo Section with Enhanced Glass Effect -->
|
||||
<v-list-item class="logo-section">
|
||||
<v-img
|
||||
src="/MONACOUSA-Flags_376x376.png"
|
||||
:width="miniVariant ? 40 : 80"
|
||||
:height="miniVariant ? 40 : 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">
|
||||
MonacoUSA Portal
|
||||
<template v-if="!miniVariant">
|
||||
<v-img
|
||||
src="/MONACOUSA-Flags_376x376.png"
|
||||
width="80"
|
||||
height="80"
|
||||
class="mx-auto logo-image mb-2"
|
||||
/>
|
||||
<div class="logo-text">
|
||||
<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>
|
||||
<v-chip
|
||||
size="x-small"
|
||||
class="monaco-chip-gradient mt-1"
|
||||
>
|
||||
MEMBER
|
||||
</v-chip>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<v-img
|
||||
src="/MONACOUSA-Flags_376x376.png"
|
||||
width="40"
|
||||
height="40"
|
||||
class="mx-auto logo-image"
|
||||
/>
|
||||
</template>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="glass-divider" />
|
||||
|
|
@ -44,7 +53,7 @@
|
|||
<v-list-item
|
||||
:to="item.to"
|
||||
:prepend-icon="item.icon"
|
||||
:title="!miniVariant ? item.title : ''"
|
||||
:title="!miniVariant ? item.title : undefined"
|
||||
:value="item.value"
|
||||
class="nav-item-enhanced"
|
||||
v-bind="props"
|
||||
|
|
@ -54,7 +63,7 @@
|
|||
:content="item.badge"
|
||||
color="error"
|
||||
inline
|
||||
:dot="isCollapsed"
|
||||
:dot="miniVariant"
|
||||
/>
|
||||
</template>
|
||||
</v-list-item>
|
||||
|
|
|
|||
Loading…
Reference in New Issue