Fix sidebar width and profile section design issues
Build And Push Image / docker (push) Successful in 1m48s
Details
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:
parent
557f9b6260
commit
f68e3afacd
Binary file not shown.
|
After Width: | Height: | Size: 673 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 608 KiB |
|
|
@ -940,7 +940,7 @@ $screen-xl: 1280px;
|
|||
|
||||
// Ensure rail mode uses correct width - increased to fit icons
|
||||
&.v-navigation-drawer--rail {
|
||||
width: 80px !important;
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
:expand-on-hover="false"
|
||||
permanent
|
||||
width="280"
|
||||
rail-width="80"
|
||||
rail-width="100"
|
||||
class="enhanced-glass-drawer"
|
||||
>
|
||||
<!-- Enhanced Logo Section -->
|
||||
|
|
@ -278,15 +278,15 @@
|
|||
<template v-slot:append>
|
||||
<div class="pa-2">
|
||||
<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 -->
|
||||
<ProfileAvatar
|
||||
:member-id="memberData?.member_id || memberData?.Id"
|
||||
:first-name="memberData?.first_name || user?.firstName"
|
||||
:last-name="memberData?.last_name || user?.lastName"
|
||||
:member-name="memberData?.FullName || user?.name"
|
||||
:size="miniVariant ? 'x-small' : 'small'"
|
||||
:class="miniVariant ? 'mb-2' : 'mr-3'"
|
||||
:size="miniVariant ? '32' : 'small'"
|
||||
:class="miniVariant ? '' : 'mr-3'"
|
||||
/>
|
||||
|
||||
<!-- Info Section (Hidden in mini mode) -->
|
||||
|
|
@ -297,20 +297,17 @@
|
|||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div :class="miniVariant ? '' : 'ml-auto'">
|
||||
<div :class="miniVariant ? 'mt-2' : 'ml-auto'">
|
||||
<v-menu location="top" offset-y>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
:icon="miniVariant"
|
||||
:size="miniVariant ? 'x-small' : 'small'"
|
||||
:variant="miniVariant ? 'text' : 'tonal'"
|
||||
icon
|
||||
:size="miniVariant ? 'small' : 'small'"
|
||||
variant="text"
|
||||
class="profile-menu-btn"
|
||||
>
|
||||
<v-icon :size="miniVariant ? 'small' : 'default'">
|
||||
{{ miniVariant ? 'mdi-dots-vertical' : 'mdi-menu' }}
|
||||
</v-icon>
|
||||
<span v-if="!miniVariant" class="ml-1">Menu</span>
|
||||
<v-icon>mdi-dots-vertical</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list density="compact" class="glass-menu" min-width="200">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
:expand-on-hover="false"
|
||||
permanent
|
||||
width="280"
|
||||
rail-width="80"
|
||||
rail-width="100"
|
||||
class="enhanced-glass-drawer"
|
||||
>
|
||||
<!-- Enhanced Logo Section -->
|
||||
|
|
@ -253,15 +253,15 @@
|
|||
<template v-slot:append>
|
||||
<div class="pa-2">
|
||||
<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 -->
|
||||
<ProfileAvatar
|
||||
:member-id="memberData?.member_id || memberData?.Id"
|
||||
:first-name="memberData?.first_name || user?.firstName"
|
||||
:last-name="memberData?.last_name || user?.lastName"
|
||||
:member-name="memberData?.FullName || user?.name"
|
||||
:size="miniVariant ? 'x-small' : 'small'"
|
||||
:class="miniVariant ? 'mb-2' : 'mr-3'"
|
||||
:size="miniVariant ? '32' : 'small'"
|
||||
:class="miniVariant ? '' : 'mr-3'"
|
||||
/>
|
||||
|
||||
<!-- Info Section (Hidden in mini mode) -->
|
||||
|
|
@ -272,20 +272,17 @@
|
|||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div :class="miniVariant ? '' : 'ml-auto'">
|
||||
<div :class="miniVariant ? 'mt-2' : 'ml-auto'">
|
||||
<v-menu location="top" offset-y>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
:icon="miniVariant"
|
||||
:size="miniVariant ? 'x-small' : 'small'"
|
||||
:variant="miniVariant ? 'text' : 'tonal'"
|
||||
icon
|
||||
:size="miniVariant ? 'small' : 'small'"
|
||||
variant="text"
|
||||
class="profile-menu-btn"
|
||||
>
|
||||
<v-icon :size="miniVariant ? 'small' : 'default'">
|
||||
{{ miniVariant ? 'mdi-dots-vertical' : 'mdi-menu' }}
|
||||
</v-icon>
|
||||
<span v-if="!miniVariant" class="ml-1">Menu</span>
|
||||
<v-icon>mdi-dots-vertical</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list density="compact" class="glass-menu" min-width="200">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
:expand-on-hover="false"
|
||||
permanent
|
||||
width="280"
|
||||
rail-width="80"
|
||||
rail-width="100"
|
||||
class="enhanced-glass-drawer"
|
||||
>
|
||||
<!-- Logo Section with Enhanced Glass Effect -->
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
<template v-slot:append>
|
||||
<div class="pa-2">
|
||||
<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 -->
|
||||
<div class="position-relative">
|
||||
<ProfileAvatar
|
||||
|
|
@ -85,8 +85,8 @@
|
|||
:member-id="memberData?.member_id"
|
||||
:first-name="memberData?.first_name || user?.firstName"
|
||||
:last-name="memberData?.last_name || user?.lastName"
|
||||
:size="miniVariant ? 'x-small' : 'small'"
|
||||
:class="miniVariant ? 'mb-2' : 'mr-3'"
|
||||
:size="miniVariant ? '32' : 'small'"
|
||||
:class="miniVariant ? '' : 'mr-3'"
|
||||
:show-badge="false"
|
||||
/>
|
||||
<div v-if="!miniVariant" class="online-indicator" />
|
||||
|
|
@ -100,20 +100,17 @@
|
|||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div :class="miniVariant ? '' : 'ml-auto'">
|
||||
<div :class="miniVariant ? 'mt-2' : 'ml-auto'">
|
||||
<v-menu location="top" offset-y>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
:icon="miniVariant"
|
||||
:size="miniVariant ? 'x-small' : 'small'"
|
||||
:variant="miniVariant ? 'text' : 'tonal'"
|
||||
icon
|
||||
:size="miniVariant ? 'small' : 'small'"
|
||||
variant="text"
|
||||
class="profile-menu-btn"
|
||||
>
|
||||
<v-icon :size="miniVariant ? 'small' : 'default'">
|
||||
{{ miniVariant ? 'mdi-dots-vertical' : 'mdi-menu' }}
|
||||
</v-icon>
|
||||
<span v-if="!miniVariant" class="ml-1">Menu</span>
|
||||
<v-icon>mdi-dots-vertical</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list density="compact" class="glass-menu" min-width="200">
|
||||
|
|
|
|||
Loading…
Reference in New Issue