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:
parent
9b045c7b97
commit
1a24faa9db
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue