Remove sidebar collapse functionality entirely
Build And Push Image / docker (push) Successful in 2m14s Details

- Removed all collapse/expand functionality from sidebar
- Removed collapse button and chevron icons
- Removed isCollapsed state and toggle logic
- Removed all CSS related to collapsed states
- Simplified navigation items without tooltips
- Fixed sidebar at 280px width permanently
- Cleaned up profile footer without conditional rendering

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Matt 2025-08-31 15:01:06 +02:00
parent 5af0f2e4c0
commit 6e0e640f1d
1 changed files with 22 additions and 60 deletions

View File

@ -3,43 +3,28 @@
<v-navigation-drawer <v-navigation-drawer
v-model="drawer" v-model="drawer"
app app
:width="isCollapsed ? '140' : '280'" width="280"
:rail="isCollapsed"
class="enhanced-glass-drawer" class="enhanced-glass-drawer"
> >
<!-- Logo Section with Enhanced Glass Effect --> <!-- Logo Section with Enhanced Glass Effect -->
<v-list-item class="logo-section" :class="{ 'logo-section--collapsed': isCollapsed }"> <v-list-item class="logo-section">
<v-img <v-img
src="/MONACOUSA-Flags_376x376.png" src="/MONACOUSA-Flags_376x376.png"
:width="isCollapsed ? '40' : '80'" width="80"
:height="isCollapsed ? '40' : '80'" height="80"
class="mx-auto logo-image" class="mx-auto logo-image mb-2"
:class="{ 'mb-2': !isCollapsed }"
/> />
<transition name="fade"> <div class="logo-text">
<div v-if="!isCollapsed" class="logo-text"> <div class="text-h6 font-weight-bold monaco-red-text">
<div class="text-h6 font-weight-bold monaco-red-text"> MonacoUSA Portal
MonacoUSA Portal
</div>
<v-chip
size="x-small"
class="monaco-chip-gradient mt-1"
>
MEMBER
</v-chip>
</div> </div>
</transition> <v-chip
size="x-small"
<!-- Collapse Toggle Button --> class="monaco-chip-gradient mt-1"
<v-btn >
icon MEMBER
size="small" </v-chip>
variant="text" </div>
class="collapse-btn"
@click="toggleCollapse"
>
<v-icon>{{ isCollapsed ? 'mdi-chevron-right' : 'mdi-chevron-left' }}</v-icon>
</v-btn>
</v-list-item> </v-list-item>
<v-divider class="glass-divider" /> <v-divider class="glass-divider" />
@ -79,25 +64,23 @@
<template v-slot:append> <template v-slot:append>
<div class="profile-footer"> <div class="profile-footer">
<v-divider class="mb-3" /> <v-divider class="mb-3" />
<div class="profile-card-footer" :class="{ 'profile-card-footer--collapsed': isCollapsed }"> <div class="profile-card-footer">
<div class="profile-avatar-wrapper"> <div class="profile-avatar-wrapper">
<ProfileAvatar <ProfileAvatar
v-if="memberData" v-if="memberData"
: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="isCollapsed ? 'small' : 'default'" size="default"
:show-badge="false" :show-badge="false"
/> />
<div class="online-indicator" /> <div class="online-indicator" />
</div> </div>
<transition name="fade"> <div class="profile-info">
<div v-if="!isCollapsed" class="profile-info"> <div class="profile-name">{{ fullName }}</div>
<div class="profile-name">{{ fullName }}</div> <div class="profile-email">{{ email }}</div>
<div class="profile-email">{{ email }}</div> </div>
</div> <v-menu offset-y>
</transition>
<v-menu v-if="!isCollapsed" offset-y>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-btn <v-btn
icon="mdi-dots-vertical" icon="mdi-dots-vertical"
@ -230,7 +213,6 @@ import type { Member } from '~/utils/types';
const { user, logout } = useAuth(); const { user, logout } = useAuth();
const drawer = ref(true); const drawer = ref(true);
const isCollapsed = ref(false);
const notifications = ref(0); const notifications = ref(0);
// Navigation items configuration // Navigation items configuration
@ -300,21 +282,6 @@ const handleLogout = async () => {
await logout(); await logout();
}; };
// Toggle collapse state
const toggleCollapse = () => {
isCollapsed.value = !isCollapsed.value;
// Save preference to localStorage
localStorage.setItem('sidebarCollapsed', isCollapsed.value.toString());
};
// Load saved collapse state
onMounted(() => {
const saved = localStorage.getItem('sidebarCollapsed');
if (saved === 'true') {
isCollapsed.value = true;
}
});
// Responsive drawer behavior // Responsive drawer behavior
const { width } = useDisplay(); const { width } = useDisplay();
watch(width, (newWidth) => { watch(width, (newWidth) => {
@ -540,11 +507,6 @@ watch(width, (newWidth) => {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease; transition: all 0.3s ease;
&--collapsed {
justify-content: center;
padding: 0.75rem;
}
&:hover { &:hover {
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95),