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