matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix sidebar width and profile section design issues
Build And Push Image / docker (push) Successful in 1m48s Details 

- Increased collapsed sidebar width from 80px to 100px for better icon visibility
- Updated rail-width prop to 100 in all three layouts (admin, board, member)
- Fixed profile section avatar sizing - now uses size 32 in collapsed mode
- Simplified menu button to always show vertical dots icon
- Improved spacing and alignment in profile section for both states
- Removed conditional button variants for cleaner, consistent design

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Matt 2025-08-31 23:35:28 +02:00
parent 557f9b6260
commit f68e3afacd
6 changed files with 28 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.playwright-mcp/admin-dashboard-sidebar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 673 KiB

BIN
.playwright-mcp/sidebar-collapsed-state.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 608 KiB

2
assets/scss/main.scss
View File

@ -940,7 +940,7 @@ $screen-xl: 1280px;
// Ensure rail mode uses correct width - increased to fit icons // Ensure rail mode uses correct width - increased to fit icons
&.v-navigation-drawer--rail { &.v-navigation-drawer--rail {
width: 80px !important; width: 100px !important;
} }
&__content { &__content {

21
layouts/admin.vue
View File

@ -6,7 +6,7 @@
:expand-on-hover="false" :expand-on-hover="false"
permanent permanent
width="280" width="280"
rail-width="80" rail-width="100"
class="enhanced-glass-drawer" class="enhanced-glass-drawer"
> >
<!-- Enhanced Logo Section --> <!-- Enhanced Logo Section -->
@ -278,15 +278,15 @@
<template v-slot:append> <template v-slot:append>
<div class="pa-2"> <div class="pa-2">
<v-card class="glass-profile-card overflow-visible"> <v-card class="glass-profile-card overflow-visible">
<div class="d-flex align-center" :class="miniVariant ? 'flex-column pa-2' : 'pa-3'"> <div class="d-flex align-center" :class="miniVariant ? 'flex-column py-3 px-2' : 'pa-3'">
<!-- Avatar Section --> <!-- Avatar Section -->
<ProfileAvatar <ProfileAvatar
:member-id="memberData?.member_id || memberData?.Id" :member-id="memberData?.member_id || memberData?.Id"
:first-name="memberData?.first_name || user?.firstName" :first-name="memberData?.first_name || user?.firstName"
:last-name="memberData?.last_name || user?.lastName" :last-name="memberData?.last_name || user?.lastName"
:member-name="memberData?.FullName || user?.name" :member-name="memberData?.FullName || user?.name"
:size="miniVariant ? 'x-small' : 'small'" :size="miniVariant ? '32' : 'small'"
:class="miniVariant ? 'mb-2' : 'mr-3'" :class="miniVariant ? '' : 'mr-3'"
/> />
<!-- Info Section (Hidden in mini mode) --> <!-- Info Section (Hidden in mini mode) -->
@ -297,20 +297,17 @@
</div> </div>
<!-- Action Buttons --> <!-- Action Buttons -->
<div :class="miniVariant ? '' : 'ml-auto'"> <div :class="miniVariant ? 'mt-2' : 'ml-auto'">
<v-menu location="top" offset-y> <v-menu location="top" offset-y>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-btn <v-btn
v-bind="props" v-bind="props"
:icon="miniVariant" icon
:size="miniVariant ? 'x-small' : 'small'" :size="miniVariant ? 'small' : 'small'"
:variant="miniVariant ? 'text' : 'tonal'" variant="text"
class="profile-menu-btn" class="profile-menu-btn"
> >
<v-icon :size="miniVariant ? 'small' : 'default'"> <v-icon>mdi-dots-vertical</v-icon>
{{ miniVariant ? 'mdi-dots-vertical' : 'mdi-menu' }}
</v-icon>
<span v-if="!miniVariant" class="ml-1">Menu</span>
</v-btn> </v-btn>
</template> </template>
<v-list density="compact" class="glass-menu" min-width="200"> <v-list density="compact" class="glass-menu" min-width="200">

21
layouts/board.vue
View File

@ -6,7 +6,7 @@
:expand-on-hover="false" :expand-on-hover="false"
permanent permanent
width="280" width="280"
rail-width="80" rail-width="100"
class="enhanced-glass-drawer" class="enhanced-glass-drawer"
> >
<!-- Enhanced Logo Section --> <!-- Enhanced Logo Section -->
@ -253,15 +253,15 @@
<template v-slot:append> <template v-slot:append>
<div class="pa-2"> <div class="pa-2">
<v-card class="glass-profile-card overflow-visible"> <v-card class="glass-profile-card overflow-visible">
<div class="d-flex align-center" :class="miniVariant ? 'flex-column pa-2' : 'pa-3'"> <div class="d-flex align-center" :class="miniVariant ? 'flex-column py-3 px-2' : 'pa-3'">
<!-- Avatar Section --> <!-- Avatar Section -->
<ProfileAvatar <ProfileAvatar
:member-id="memberData?.member_id || memberData?.Id" :member-id="memberData?.member_id || memberData?.Id"
:first-name="memberData?.first_name || user?.firstName" :first-name="memberData?.first_name || user?.firstName"
:last-name="memberData?.last_name || user?.lastName" :last-name="memberData?.last_name || user?.lastName"
:member-name="memberData?.FullName || user?.name" :member-name="memberData?.FullName || user?.name"
:size="miniVariant ? 'x-small' : 'small'" :size="miniVariant ? '32' : 'small'"
:class="miniVariant ? 'mb-2' : 'mr-3'" :class="miniVariant ? '' : 'mr-3'"
/> />
<!-- Info Section (Hidden in mini mode) --> <!-- Info Section (Hidden in mini mode) -->
@ -272,20 +272,17 @@
</div> </div>
<!-- Action Buttons --> <!-- Action Buttons -->
<div :class="miniVariant ? '' : 'ml-auto'"> <div :class="miniVariant ? 'mt-2' : 'ml-auto'">
<v-menu location="top" offset-y> <v-menu location="top" offset-y>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-btn <v-btn
v-bind="props" v-bind="props"
:icon="miniVariant" icon
:size="miniVariant ? 'x-small' : 'small'" :size="miniVariant ? 'small' : 'small'"
:variant="miniVariant ? 'text' : 'tonal'" variant="text"
class="profile-menu-btn" class="profile-menu-btn"
> >
<v-icon :size="miniVariant ? 'small' : 'default'"> <v-icon>mdi-dots-vertical</v-icon>
{{ miniVariant ? 'mdi-dots-vertical' : 'mdi-menu' }}
</v-icon>
<span v-if="!miniVariant" class="ml-1">Menu</span>
</v-btn> </v-btn>
</template> </template>
<v-list density="compact" class="glass-menu" min-width="200"> <v-list density="compact" class="glass-menu" min-width="200">

21
layouts/member.vue
View File

@ -6,7 +6,7 @@
:expand-on-hover="false" :expand-on-hover="false"
permanent permanent
width="280" width="280"
rail-width="80" rail-width="100"
class="enhanced-glass-drawer" class="enhanced-glass-drawer"
> >
<!-- Logo Section with Enhanced Glass Effect --> <!-- Logo Section with Enhanced Glass Effect -->
@ -77,7 +77,7 @@
<template v-slot:append> <template v-slot:append>
<div class="pa-2"> <div class="pa-2">
<v-card class="glass-profile-card overflow-visible"> <v-card class="glass-profile-card overflow-visible">
<div class="d-flex align-center" :class="miniVariant ? 'flex-column pa-2' : 'pa-3'"> <div class="d-flex align-center" :class="miniVariant ? 'flex-column py-3 px-2' : 'pa-3'">
<!-- Avatar Section --> <!-- Avatar Section -->
<div class="position-relative"> <div class="position-relative">
<ProfileAvatar <ProfileAvatar
@ -85,8 +85,8 @@
:member-id="memberData?.member_id" :member-id="memberData?.member_id"
:first-name="memberData?.first_name || user?.firstName" :first-name="memberData?.first_name || user?.firstName"
:last-name="memberData?.last_name || user?.lastName" :last-name="memberData?.last_name || user?.lastName"
:size="miniVariant ? 'x-small' : 'small'" :size="miniVariant ? '32' : 'small'"
:class="miniVariant ? 'mb-2' : 'mr-3'" :class="miniVariant ? '' : 'mr-3'"
:show-badge="false" :show-badge="false"
/> />
<div v-if="!miniVariant" class="online-indicator" /> <div v-if="!miniVariant" class="online-indicator" />
@ -100,20 +100,17 @@
</div> </div>
<!-- Action Buttons --> <!-- Action Buttons -->
<div :class="miniVariant ? '' : 'ml-auto'"> <div :class="miniVariant ? 'mt-2' : 'ml-auto'">
<v-menu location="top" offset-y> <v-menu location="top" offset-y>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-btn <v-btn
v-bind="props" v-bind="props"
:icon="miniVariant" icon
:size="miniVariant ? 'x-small' : 'small'" :size="miniVariant ? 'small' : 'small'"
:variant="miniVariant ? 'text' : 'tonal'" variant="text"
class="profile-menu-btn" class="profile-menu-btn"
> >
<v-icon :size="miniVariant ? 'small' : 'default'"> <v-icon>mdi-dots-vertical</v-icon>
{{ miniVariant ? 'mdi-dots-vertical' : 'mdi-menu' }}
</v-icon>
<span v-if="!miniVariant" class="ml-1">Menu</span>
</v-btn> </v-btn>
</template> </template>
<v-list density="compact" class="glass-menu" min-width="200"> <v-list density="compact" class="glass-menu" min-width="200">