fix: Improve sidebar UX and mobile/PWA compatibility

- Remove Interest Emails from navigation (hidden as requested)
- Change 'Client Portal' to 'CRM' throughout
- Make logo clickable to expand/collapse sidebar (removed separate button)
- Add proper mobile responsiveness with fixed positioning
- Add PWA safe area insets for standalone mode
- Improve visual alignment and smooth transitions
- Fix rail mode width and spacing issues
This commit is contained in:
Matt 2025-07-11 17:20:34 -04:00
parent 9b045c7b97
commit 1a24faa9db
1 changed files with 60 additions and 17 deletions

View File

@ -10,21 +10,12 @@
<!-- Logo and Title --> <!-- Logo and Title -->
<v-list> <v-list>
<v-list-item <v-list-item
class="px-2" class="px-2 cursor-pointer"
prepend-avatar="/Port Nimara New Logo-Circular Frame.png" prepend-avatar="/Port Nimara New Logo-Circular Frame.png"
:title="rail ? '' : 'Port Nimara'" :title="rail ? '' : 'Port Nimara'"
:subtitle="rail ? '' : 'Client Portal'" :subtitle="rail ? '' : 'CRM'"
@click="rail = !rail"
> >
<template v-slot:append>
<v-btn
icon
variant="text"
size="small"
@click.stop="rail = !rail"
>
<v-icon>{{ rail ? 'mdi-menu' : 'mdi-chevron-left' }}</v-icon>
</v-btn>
</template>
</v-list-item> </v-list-item>
</v-list> </v-list>
@ -211,11 +202,6 @@ const navigationItems = computed(() => {
label: 'Expenses', label: 'Expenses',
icon: 'mdi-receipt', icon: 'mdi-receipt',
to: '/dashboard/expenses', to: '/dashboard/expenses',
},
{
label: 'Interest Emails',
icon: 'mdi-email',
to: '/dashboard/interest-emails',
} }
); );
} }
@ -257,6 +243,24 @@ onMounted(() => {
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
} }
.cursor-pointer {
cursor: pointer;
}
/* Improve rail mode appearance */
.v-navigation-drawer--rail {
width: 72px !important;
}
.v-navigation-drawer--rail .v-list-item {
padding-inline-start: 12px !important;
padding-inline-end: 12px !important;
}
.v-navigation-drawer--rail .v-list-item__prepend {
margin-inline-end: 0 !important;
}
.v-navigation-drawer--rail .v-list-item__append { .v-navigation-drawer--rail .v-list-item__append {
display: none; display: none;
} }
@ -264,4 +268,43 @@ onMounted(() => {
.v-navigation-drawer--rail.v-navigation-drawer--is-hovering .v-list-item__append { .v-navigation-drawer--rail.v-navigation-drawer--is-hovering .v-list-item__append {
display: flex; display: flex;
} }
/* Ensure proper mobile responsiveness */
@media (max-width: 960px) {
.v-navigation-drawer {
position: fixed !important;
z-index: 1004 !important;
}
.v-main {
padding-left: 0 !important;
}
}
/* PWA optimizations */
@media (display-mode: standalone) {
.v-app-bar {
padding-top: env(safe-area-inset-top);
}
.v-navigation-drawer {
padding-bottom: env(safe-area-inset-bottom);
}
}
/* Improve visual alignment */
.v-list-item__prepend > .v-avatar {
margin-inline-end: 16px;
}
.v-navigation-drawer--rail .v-list-item__prepend > .v-avatar {
margin-inline-end: 0;
}
/* Smooth transitions */
.v-navigation-drawer,
.v-list-item__content,
.v-list-item__prepend {
transition: all 0.2s ease-in-out;
}
</style> </style>