diff --git a/src/components/ModernNavbar.vue b/src/components/ModernNavbar.vue index 35e115c..73672bf 100644 --- a/src/components/ModernNavbar.vue +++ b/src/components/ModernNavbar.vue @@ -126,7 +126,7 @@ @@ -451,25 +446,24 @@ updateBodyClass() SIDEBAR USER SECTION ============================================ */ .sidebar-user { - position: relative; + display: flex; + flex-direction: column; + gap: var(--spacing-sm); } -.sidebar-user-trigger { +.sidebar-user-info { display: flex; align-items: center; gap: var(--spacing-sm); - width: 100%; padding: var(--spacing-md); border-radius: 8px; background: var(--color-surface-secondary); border: 1px solid var(--color-border); - cursor: pointer; - transition: all var(--transition-base); } -.sidebar-user-trigger:hover { - background: var(--color-surface-hover); - border-color: var(--color-primary); +.sidebar-nav.collapsed .sidebar-user-info { + padding: var(--spacing-sm); + justify-content: center; } .user-avatar-sidebar { @@ -514,64 +508,23 @@ updateBodyClass() text-overflow: ellipsis; } -.chevron { - width: 16px; - height: 16px; - color: var(--color-text-secondary); - flex-shrink: 0; - transition: transform var(--transition-base); -} - -.sidebar-user-trigger:hover .chevron { - transform: translateY(2px); -} - -.user-dropdown-sidebar { - max-height: 0; - overflow: hidden; - transition: max-height var(--transition-base); - margin-top: var(--spacing-xs); - border-radius: 8px; - background: var(--color-surface); - border: 1px solid var(--color-border); -} - -.user-dropdown-sidebar.active { - max-height: 200px; -} - -.dropdown-item-sidebar { - display: flex; - align-items: center; - gap: var(--spacing-sm); - padding: var(--spacing-md); +/* Logout Button */ +.sidebar-logout { color: var(--color-danger); - background: none; - border: none; - width: 100%; - text-align: left; - cursor: pointer; - font-size: var(--font-size-sm); - font-weight: var(--font-weight-medium); - transition: all var(--transition-base); + margin-bottom: 0; } -.dropdown-item-sidebar:hover { - background: rgba(230, 57, 70, 0.08); +.sidebar-logout:hover { + background: rgba(230, 57, 70, 0.1); + color: var(--color-danger); } -.dropdown-item-sidebar svg { - width: 18px; - height: 18px; +.sidebar-logout svg { + color: var(--color-danger); } -.sidebar-nav.collapsed .sidebar-user-trigger { - padding: var(--spacing-sm); - justify-content: center; -} - -.sidebar-nav.collapsed .user-dropdown-sidebar { - display: none; +.sidebar-logout:hover svg { + color: var(--color-danger); } /* ============================================