RideAware/rideaware-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

always show the logout button

Browse Source
This commit is contained in:
Cipher Vance
2026-01-21 08:06:30 -06:00
parent a4b09e8625
commit 3dd3f5788b
1 changed files with 28 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/ModernNavbar.vue
View File

@@ -126,7 +126,7 @@
<!-- User Profile Section -->
<div class="sidebar-user">
<button class="sidebar-user-trigger" @click="toggleUserMenu">
<div class="sidebar-user-info">
<div class="user-avatar-sidebar">
<svg viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
@@ -137,22 +137,17 @@
<span class="username">{{ auth.user?.username || 'User' }}</span>
<small>{{ auth.user?.email || 'user@example.com' }}</small>
</div>
<svg v-show="!sidebarCollapsed" viewBox="0 0 24 24" fill="none" class="chevron">
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<!-- User Dropdown -->
<div class="user-dropdown-sidebar" :class="{ active: userMenuOpen }">
<button @click="handleLogout" class="dropdown-item-sidebar">
<svg viewBox="0 0 24 24" fill="none">
<path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="16,17 21,12 16,7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>Logout</span>
</button>
</div>
<!-- Logout Button -->
<button @click="handleLogout" class="sidebar-link sidebar-logout">
<svg viewBox="0 0 24 24" fill="none">
<path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="16,17 21,12 16,7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span v-show="!sidebarCollapsed">Logout</span>
</button>
</div>
</div>
</aside>
@@ -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);
}
/* ============================================