From ea151aa4d1dee45229cc76100b5c1dd46778cf0c Mon Sep 17 00:00:00 2001
From: Cipher Vance <hello@ciphervance.com>
Date: Wed, 21 Jan 2026 07:48:59 -0600
Subject: [PATCH] redesing the navbar

---
 src/components/ModernNavbar.vue  | 1091 ++++++++++++++----------------
 src/components/UserDashboard.vue |    8 +
 2 files changed, 521 insertions(+), 578 deletions(-)

diff --git a/src/components/ModernNavbar.vue b/src/components/ModernNavbar.vue
index 4534954..5a11b1c 100644
--- a/src/components/ModernNavbar.vue
+++ b/src/components/ModernNavbar.vue
@@ -1,189 +1,180 @@
 <template>
-  <nav class="modern-navbar">
-    <div class="navbar-container">
-      <!-- Enhanced Logo with Better Typography -->
-      <RouterLink to="/dashboard" class="navbar-brand">
-        <div class="brand-logo">
-          <svg viewBox="0 0 32 32" class="logo-icon">
-            <circle cx="16" cy="16" r="14" fill="url(#logoGradient)" />
-            <path d="M12 10L16 6L20 10L16 14L12 10Z" fill="white" opacity="0.9" />
-            <circle cx="16" cy="22" r="3" fill="white" opacity="0.9" />
-            <defs>
-              <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" style="stop-color:#0066cc;stop-opacity:1" />
-                <stop offset="100%" style="stop-color:#0052a3;stop-opacity:1" />
-              </linearGradient>
-            </defs>
-          </svg>
-          <div class="brand-text">
-            <h1>RideAware</h1>
-            <span class="tagline">Train Smart. Ride Aware.</span>
-          </div>
+  <!-- Sidebar Navigation -->
+  <aside class="sidebar-nav" :class="{ collapsed: sidebarCollapsed, 'mobile-open': mobileMenuOpen }">
+    <!-- Sidebar Header -->
+    <div class="sidebar-header">
+      <RouterLink to="/dashboard" class="sidebar-brand" @click="closeMobileMenu">
+        <svg viewBox="0 0 32 32" class="logo-icon">
+          <circle cx="16" cy="16" r="14" fill="url(#logoGradient)" />
+          <path d="M12 10L16 6L20 10L16 14L12 10Z" fill="white" opacity="0.9" />
+          <circle cx="16" cy="22" r="3" fill="white" opacity="0.9" />
+          <defs>
+            <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" style="stop-color:#0066cc;stop-opacity:1" />
+              <stop offset="100%" style="stop-color:#0052a3;stop-opacity:1" />
+            </linearGradient>
+          </defs>
+        </svg>
+        <div class="brand-text" v-show="!sidebarCollapsed">
+          <h1>RideAware</h1>
+          <span class="tagline">Train Smart</span>
         </div>
       </RouterLink>
 
-      <!-- Mobile Menu Toggle -->
+      <!-- Desktop Collapse Toggle -->
       <button
-        class="mobile-menu-toggle"
-        @click="toggleMobileMenu"
-        :class="{ active: mobileMenuOpen }"
-        aria-label="Toggle navigation menu"
+        class="collapse-toggle"
+        @click="toggleSidebarCollapse"
+        :title="sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+        aria-label="Toggle sidebar"
       >
-        <span></span>
-        <span></span>
-        <span></span>
+        <svg viewBox="0 0 24 24" fill="none">
+          <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+    </div>
+
+    <!-- Navigation Links -->
+    <nav class="sidebar-nav-links">
+      <RouterLink
+        to="/dashboard"
+        class="sidebar-link"
+        @click="closeMobileMenu"
+      >
+        <svg viewBox="0 0 24 24" fill="none">
+          <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <span v-show="!sidebarCollapsed">Dashboard</span>
+      </RouterLink>
+
+      <RouterLink
+        to="/calendar"
+        class="sidebar-link"
+        @click="closeMobileMenu"
+      >
+        <svg viewBox="0 0 24 24" fill="none">
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
+          <line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/>
+        </svg>
+        <span v-show="!sidebarCollapsed">Calendar</span>
+      </RouterLink>
+
+      <RouterLink
+        to="/profile"
+        class="sidebar-link"
+        @click="closeMobileMenu"
+      >
+        <svg viewBox="0 0 24 24" fill="none">
+          <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <span v-show="!sidebarCollapsed">Profile</span>
+      </RouterLink>
+
+      <RouterLink
+        to="/equipment"
+        class="sidebar-link"
+        @click="closeMobileMenu"
+      >
+        <svg viewBox="0 0 24 24" fill="none">
+          <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
+          <path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+        <span v-show="!sidebarCollapsed">Equipment</span>
+      </RouterLink>
+
+      <RouterLink
+        to="/zones"
+        class="sidebar-link"
+        @click="closeMobileMenu"
+      >
+        <svg viewBox="0 0 24 24" fill="none">
+          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <span v-show="!sidebarCollapsed">Training Zones</span>
+      </RouterLink>
+    </nav>
+
+    <!-- Sidebar Footer -->
+    <div class="sidebar-footer">
+      <!-- Theme Toggle -->
+      <button
+        class="sidebar-link sidebar-action"
+        @click="toggleTheme"
+        :title="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'"
+      >
+        <svg v-if="isDarkMode" viewBox="0 0 24 24" fill="none">
+          <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2"/>
+          <line x1="12" y1="1" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <line x1="12" y1="21" x2="12" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <line x1="1" y1="12" x2="3" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <line x1="21" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+        <svg v-else viewBox="0 0 24 24" fill="none">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <span v-show="!sidebarCollapsed">{{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}</span>
       </button>
 
-      <!-- Navigation Menu -->
-      <div class="navbar-menu" :class="{ active: mobileMenuOpen }">
-        <!-- Navigation Links with btn-modern-secondary -->
-        <div class="nav-links">
-          <RouterLink
-            to="/dashboard"
-            class="nav-link btn-modern btn-modern-secondary"
-            @click="closeMobileMenu"
-          >
+      <!-- User Profile Section -->
+      <div class="sidebar-user">
+        <button class="sidebar-user-trigger" @click="toggleUserMenu">
+          <div class="user-avatar-sidebar">
             <svg viewBox="0 0 24 24" fill="none">
-              <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
+              <path d="M6 21V19C6 17.3431 7.34315 16 9 16H15C16.6569 16 18 17.3431 18 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             </svg>
-            <span>Dashboard</span>
-          </RouterLink>
-          <RouterLink
-            to="/profile"
-            class="nav-link btn-modern btn-modern-secondary"
-            @click="closeMobileMenu"
-          >
-            <svg viewBox="0 0 24 24" fill="none">
-              <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            <span>Profile</span>
-          </RouterLink>
-          <RouterLink
-            to="/equipment"
-            class="nav-link btn-modern btn-modern-secondary"
-            @click="closeMobileMenu"
-          >
-            <svg viewBox="0 0 24 24" fill="none">
-              <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
-              <path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-            <span>Equipment</span>
-          </RouterLink>
-          <RouterLink
-            to="/zones"
-            class="nav-link btn-modern btn-modern-secondary"
-            @click="closeMobileMenu"
-          >
-            <svg viewBox="0 0 24 24" fill="none">
-              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            <span>Zones</span>
-          </RouterLink>
-          <RouterLink
-            to="/calendar"
-            class="nav-link btn-modern btn-modern-secondary"
-            @click="closeMobileMenu"
-          >
-            <svg viewBox="0 0 24 24" fill="none">
-              <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
-              <line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              <line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              <line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/>
-            </svg>
-            <span>Calendar</span>
-          </RouterLink>
-        </div>
-
-        <!-- Navigation Actions -->
-        <div class="nav-actions">
-          <!-- Enhanced Dark Mode Toggle -->
-          <button
-            class="theme-toggle btn-modern btn-modern-secondary"
-            @click="toggleTheme"
-            :title="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'"
-            aria-label="Toggle theme"
-          >
-            <svg v-if="isDarkMode" viewBox="0 0 24 24" fill="none" class="theme-icon">
-              <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2"/>
-              <line x1="12" y1="1" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              <line x1="12" y1="21" x2="12" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              <line x1="1" y1="12" x2="3" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              <line x1="21" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-            <svg v-else viewBox="0 0 24 24" fill="none" class="theme-icon">
-              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            <span class="theme-text">{{ isDarkMode ? 'Light' : 'Dark' }}</span>
-          </button>
-
-          <!-- Enhanced User Menu -->
-          <div class="user-menu">
-            <button
-              class="user-avatar"
-              @click="toggleUserMenu"
-              aria-label="User menu"
-            >
-              <svg viewBox="0 0 24 24" fill="none">
-                <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
-                <path d="M6 21V19C6 17.3431 7.34315 16 9 16H15C16.6569 16 18 17.3431 18 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              </svg>
-            </button>
-            <div class="user-dropdown" :class="{ active: userMenuOpen }">
-              <div class="user-info">
-                <div class="user-avatar-large">
-                  <svg viewBox="0 0 24 24" fill="none">
-                    <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/>
-                    <path d="M6 21V19C6 17.3431 7.34315 16 9 16H15C16.6569 16 18 17.3431 18 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                  </svg>
-                </div>
-                <p class="username">{{ auth.user?.username || 'User' }}</p>
-                <small>{{ auth.user?.email || 'user@example.com' }}</small>
-              </div>
-              <div class="dropdown-divider"></div>
-              <RouterLink to="/profile" class="dropdown-item" @click="closeMenus">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2"/>
-                  <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
-                </svg>
-                <span>Edit Profile</span>
-              </RouterLink>
-              <RouterLink to="/equipment" class="dropdown-item" @click="closeMenus">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
-                  <path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                </svg>
-                <span>Equipment</span>
-              </RouterLink>
-              <RouterLink to="/zones" class="dropdown-item" @click="closeMenus">
-                <svg viewBox="0 0 24 24" fill="none">
-                  <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-                <span>Training Zones</span>
-              </RouterLink>
-              <div class="dropdown-divider"></div>
-              <button @click="handleLogout" class="dropdown-item logout-btn">
-                <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>
           </div>
+          <div class="user-info-sidebar" v-show="!sidebarCollapsed">
+            <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>
       </div>
     </div>
-  </nav>
+  </aside>
+
+  <!-- Mobile Menu Toggle -->
+  <button
+    class="mobile-menu-toggle"
+    @click="toggleMobileMenu"
+    :class="{ active: mobileMenuOpen }"
+    aria-label="Toggle navigation menu"
+  >
+    <span></span>
+    <span></span>
+    <span></span>
+  </button>
+
+  <!-- Mobile Overlay -->
+  <div
+    class="sidebar-overlay"
+    :class="{ active: mobileMenuOpen }"
+    @click="closeMobileMenu"
+  ></div>
 </template>
 
 <script setup>
@@ -194,10 +185,16 @@ import { useAuth } from '@/composables/useAuth'
 const router = useRouter()
 const auth = useAuth()
 
+const sidebarCollapsed = ref(false)
 const mobileMenuOpen = ref(false)
 const userMenuOpen = ref(false)
 const isDarkMode = ref(false)
 
+function toggleSidebarCollapse() {
+  sidebarCollapsed.value = !sidebarCollapsed.value
+  localStorage.setItem('sidebarCollapsed', String(sidebarCollapsed.value))
+}
+
 function toggleMobileMenu() {
   mobileMenuOpen.value = !mobileMenuOpen.value
   if (mobileMenuOpen.value) {
@@ -207,10 +204,6 @@ function toggleMobileMenu() {
 
 function closeMobileMenu() {
   mobileMenuOpen.value = false
-}
-
-function closeMenus() {
-  mobileMenuOpen.value = false
   userMenuOpen.value = false
 }
 
@@ -225,54 +218,70 @@ function toggleTheme() {
 
 function handleLogout() {
   auth.logout()
-  closeMenus()
+  closeMobileMenu()
   router.push('/login')
 }
+
+// Restore sidebar state from localStorage
+const savedState = localStorage.getItem('sidebarCollapsed')
+if (savedState !== null) {
+  sidebarCollapsed.value = savedState === 'true'
+}
 </script>
 
 <style scoped>
-/* Modern Navbar with Enhanced Design */
-.modern-navbar {
-  background: var(--glass-background);
-  backdrop-filter: var(--glass-blur);
-  border-bottom: 1px solid var(--color-border);
-  position: sticky;
+/* ============================================
+   SIDEBAR NAVIGATION
+   ============================================ */
+.sidebar-nav {
+  position: fixed;
+  left: 0;
   top: 0;
+  bottom: 0;
+  width: 280px;
+  background: var(--color-surface);
+  border-right: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
   z-index: var(--z-sticky);
-  transition: all var(--transition-slow);
-  box-shadow: var(--shadow-sm);
+  transition: width var(--transition-base);
+  overflow: hidden;
 }
 
-.navbar-container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: var(--spacing-md) var(--spacing-xl);
+/* Collapsed State */
+.sidebar-nav.collapsed {
+  width: 80px;
+}
+
+.sidebar-nav.collapsed .sidebar-link span {
+  display: none;
+}
+
+/* ============================================
+   SIDEBAR HEADER
+   ============================================ */
+.sidebar-header {
+  padding: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-xl);
+  gap: var(--spacing-sm);
+  flex-shrink: 0;
 }
 
-/* Enhanced Brand Logo */
-.navbar-brand {
-  text-decoration: none;
-  cursor: pointer;
-  transition: opacity var(--transition-base);
-}
-
-.navbar-brand:hover {
-  opacity: 0.9;
-}
-
-.brand-logo {
+.sidebar-brand {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
+  text-decoration: none;
+  flex: 1;
+  min-width: 0;
 }
 
 .logo-icon {
-  width: 42px;
-  height: 42px;
+  width: 40px;
+  height: 40px;
   flex-shrink: 0;
 }
 
@@ -280,11 +289,12 @@ function handleLogout() {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  min-width: 0;
 }
 
 .brand-text h1 {
   margin: 0;
-  font-size: var(--font-size-xl);
+  font-size: var(--font-size-lg);
   font-weight: var(--font-weight-bold);
   background: var(--gradient-primary);
   -webkit-background-clip: text;
@@ -292,25 +302,268 @@ function handleLogout() {
   background-clip: text;
   letter-spacing: -0.5px;
   line-height: 1.2;
+  white-space: nowrap;
 }
 
 .tagline {
   font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
-  letter-spacing: 0.3px;
+  white-space: nowrap;
 }
 
-/* Mobile Menu Toggle */
-.mobile-menu-toggle {
-  display: none;
-  flex-direction: column;
-  gap: 5px;
+.collapse-toggle {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: var(--color-surface-secondary);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+  flex-shrink: 0;
+}
+
+.collapse-toggle:hover {
+  background: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
+}
+
+.collapse-toggle svg {
+  width: 20px;
+  height: 20px;
+  transition: transform var(--transition-base);
+}
+
+.sidebar-nav.collapsed .collapse-toggle svg {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   SIDEBAR NAVIGATION LINKS
+   ============================================ */
+.sidebar-nav-links {
+  flex: 1;
+  padding: var(--spacing-md);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-xs);
+  border-radius: 8px;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  transition: all var(--transition-base);
+  cursor: pointer;
   background: none;
   border: none;
+  width: 100%;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.sidebar-link svg {
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+  transition: color var(--transition-base);
+}
+
+.sidebar-link:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-primary);
+}
+
+.sidebar-link:hover svg {
+  color: var(--color-primary);
+}
+
+.sidebar-link.router-link-active {
+  background: linear-gradient(90deg, rgba(0, 102, 204, 0.1) 0%, transparent 100%);
+  color: var(--color-primary);
+  font-weight: var(--font-weight-semibold);
+  border-left: 3px solid var(--color-primary);
+  padding-left: calc(var(--spacing-md) - 3px);
+}
+
+.sidebar-link.router-link-active svg {
+  color: var(--color-primary);
+}
+
+.sidebar-nav.collapsed .sidebar-link {
+  justify-content: center;
+  padding: var(--spacing-md) var(--spacing-sm);
+}
+
+/* ============================================
+   SIDEBAR FOOTER
+   ============================================ */
+.sidebar-footer {
+  padding: var(--spacing-md);
+  border-top: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.sidebar-action {
+  margin-bottom: var(--spacing-sm);
+}
+
+/* ============================================
+   SIDEBAR USER SECTION
+   ============================================ */
+.sidebar-user {
+  position: relative;
+}
+
+.sidebar-user-trigger {
+  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;
-  padding: var(--spacing-xs);
-  z-index: calc(var(--z-sticky) + 1);
+  transition: all var(--transition-base);
+}
+
+.sidebar-user-trigger:hover {
+  background: var(--color-surface-hover);
+  border-color: var(--color-primary);
+}
+
+.user-avatar-sidebar {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: var(--gradient-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: white;
+}
+
+.user-avatar-sidebar svg {
+  width: 20px;
+  height: 20px;
+}
+
+.user-info-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.user-info-sidebar .username {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.user-info-sidebar small {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  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);
+  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);
+}
+
+.dropdown-item-sidebar:hover {
+  background: rgba(230, 57, 70, 0.08);
+}
+
+.dropdown-item-sidebar svg {
+  width: 18px;
+  height: 18px;
+}
+
+.sidebar-nav.collapsed .sidebar-user-trigger {
+  padding: var(--spacing-sm);
+  justify-content: center;
+}
+
+.sidebar-nav.collapsed .user-dropdown-sidebar {
+  display: none;
+}
+
+/* ============================================
+   MOBILE MENU TOGGLE & OVERLAY
+   ============================================ */
+.mobile-menu-toggle {
+  display: none;
+  position: fixed;
+  top: var(--spacing-lg);
+  left: var(--spacing-lg);
+  z-index: calc(var(--z-sticky) + 2);
+  flex-direction: column;
+  gap: 5px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 10px;
+  cursor: pointer;
+  box-shadow: var(--shadow-md);
 }
 
 .mobile-menu-toggle span {
@@ -334,258 +587,61 @@ function handleLogout() {
   transform: rotate(-45deg) translate(7px, -7px);
 }
 
-/* Navigation Menu */
-.navbar-menu {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xl);
-  flex: 1;
-  justify-content: flex-end;
-}
-
-/* Navigation Links with btn-modern-secondary */
-.nav-links {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.nav-link {
-  padding: var(--spacing-xs) var(--spacing-md);
-  font-size: var(--font-size-sm);
-  text-decoration: none;
-  white-space: nowrap;
-  position: relative;
-}
-
-.nav-link svg {
-  width: 18px;
-  height: 18px;
-  flex-shrink: 0;
-}
-
-/* Active State Indicator */
-.nav-link.router-link-active {
-  background: var(--color-primary);
-  color: var(--color-text-inverse);
-  border-color: var(--color-primary);
-  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.25);
-  position: relative;
-}
-
-.nav-link.router-link-active::after {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60%;
-  height: 3px;
-  background: var(--color-primary);
-  border-radius: var(--radius-full);
-}
-
-.nav-link.router-link-active:hover {
-  background: var(--color-primary-dark);
-  border-color: var(--color-primary-dark);
-}
-
-/* Navigation Actions */
-.nav-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  padding-left: var(--spacing-lg);
-  border-left: 1px solid var(--color-border);
-}
-
-/* Enhanced Theme Toggle */
-.theme-toggle {
-  padding: var(--spacing-xs) var(--spacing-md);
-  min-width: auto;
-  position: relative;
-}
-
-.theme-toggle .theme-icon {
-  width: 18px;
-  height: 18px;
-  transition: transform var(--transition-base);
-}
-
-.theme-toggle .theme-text {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-.theme-toggle:hover .theme-icon {
-  transform: rotate(20deg);
-}
-
-/* User Menu */
-.user-menu {
-  position: relative;
-}
-
-.user-avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 42px;
-  height: 42px;
-  border-radius: var(--radius-md);
-  background: var(--gradient-primary);
-  border: none;
-  color: var(--color-text-inverse);
-  cursor: pointer;
-  transition: all var(--transition-base);
-  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
-}
-
-.user-avatar svg {
-  width: 22px;
-  height: 22px;
-}
-
-.user-avatar:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
-}
-
-/* Enhanced User Dropdown */
-.user-dropdown {
-  position: absolute;
-  top: calc(100% + var(--spacing-xs));
-  right: 0;
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
-  border: 1px solid var(--color-border);
-  padding: 0;
-  min-width: 280px;
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: calc(var(--z-sticky) - 1);
   opacity: 0;
-  visibility: hidden;
-  transform: translateY(-10px);
-  transition: all var(--transition-slow);
-  z-index: var(--z-dropdown);
-  overflow: hidden;
+  transition: opacity var(--transition-base);
 }
 
-.user-dropdown.active {
+.sidebar-overlay.active {
   opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
 }
 
-/* Enhanced User Info Section */
-.user-info {
-  padding: var(--spacing-lg);
-  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
-  color: var(--color-text-inverse);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.user-avatar-large {
-  width: 56px;
-  height: 56px;
-  border-radius: var(--radius-full);
-  background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(10px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-}
-
-.user-avatar-large svg {
-  width: 28px;
-  height: 28px;
-  stroke: white;
-}
-
-.user-info .username {
-  margin: 0;
-  font-weight: var(--font-weight-bold);
-  color: white;
-  font-size: var(--font-size-lg);
-  text-align: center;
-}
-
-.user-info small {
-  color: rgba(255, 255, 255, 0.9);
-  font-size: var(--font-size-xs);
-  text-align: center;
-}
-
-.dropdown-divider {
-  height: 1px;
-  background: var(--color-border);
-  margin: 0;
-}
-
-/* Enhanced Dropdown Items */
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  padding: var(--spacing-md) var(--spacing-lg);
-  color: var(--color-text-primary);
-  text-decoration: none;
-  transition: all var(--transition-base);
-  cursor: pointer;
-  background: none;
-  border: none;
-  width: 100%;
-  text-align: left;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-.dropdown-item svg {
-  width: 20px;
-  height: 20px;
-  color: var(--color-primary);
-  transition: transform var(--transition-base);
-  flex-shrink: 0;
-}
-
-.dropdown-item span {
-  flex: 1;
-}
-
-.dropdown-item:hover {
-  background: var(--color-surface-hover);
-  color: var(--color-primary);
-  padding-left: calc(var(--spacing-lg) + 4px);
-}
-
-.dropdown-item:hover svg {
-  transform: translateX(2px);
-}
-
-.logout-btn {
-  color: var(--color-danger);
-}
-
-.logout-btn svg {
-  color: var(--color-danger);
-}
-
-.logout-btn:hover {
-  background: rgba(230, 57, 70, 0.08);
-  color: var(--color-danger);
-}
-
-/* Mobile Responsive Design */
-@media (max-width: 992px) {
-  .navbar-container {
-    padding: var(--spacing-sm) var(--spacing-lg);
+/* ============================================
+   RESPONSIVE DESIGN
+   ============================================ */
+@media (max-width: 768px) {
+  .sidebar-nav {
+    transform: translateX(-100%);
+    transition: transform var(--transition-base);
   }
 
-  .brand-text h1 {
-    font-size: var(--font-size-lg);
+  .sidebar-nav.mobile-open {
+    transform: translateX(0);
+  }
+
+  .sidebar-nav.collapsed {
+    width: 280px;
+  }
+
+  .collapse-toggle {
+    display: none;
+  }
+
+  .mobile-menu-toggle {
+    display: flex;
+  }
+
+  .sidebar-overlay {
+    display: block;
+  }
+
+  .sidebar-overlay.active {
+    display: block;
+  }
+}
+
+@media (max-width: 480px) {
+  .tagline {
+    display: none;
+  }
+
+  .sidebar-header {
+    padding: var(--spacing-md);
   }
 
   .logo-icon {
@@ -593,129 +649,8 @@ function handleLogout() {
     height: 36px;
   }
 
-  .mobile-menu-toggle {
-    display: flex;
-  }
-
-  .navbar-menu {
-    position: fixed;
-    top: 65px;
-    left: 0;
-    right: 0;
-    background: var(--color-surface);
-    backdrop-filter: var(--glass-blur);
-    flex-direction: column;
-    gap: var(--spacing-md);
-    padding: var(--spacing-lg);
-    border-top: 1px solid var(--color-border);
-    border-bottom: 1px solid var(--color-border);
-    transform: translateY(-150%);
-    opacity: 0;
-    visibility: hidden;
-    transition: all var(--transition-slow);
-    max-height: calc(100vh - 65px);
-    overflow-y: auto;
-    box-shadow: var(--shadow-lg);
-  }
-
-  .navbar-menu.active {
-    transform: translateY(0);
-    opacity: 1;
-    visibility: visible;
-  }
-
-  .nav-links {
-    flex-direction: column;
-    gap: var(--spacing-xs);
-    width: 100%;
-  }
-
-  .nav-link {
-    width: 100%;
-    justify-content: flex-start;
-    padding: var(--spacing-md);
-    font-size: var(--font-size-base);
-  }
-
-  .nav-link.router-link-active::after {
-    display: none;
-  }
-
-  .nav-actions {
-    flex-direction: column;
-    width: 100%;
-    gap: var(--spacing-xs);
-    padding-left: 0;
-    border-left: none;
-    padding-top: var(--spacing-md);
-    border-top: 1px solid var(--color-border);
-  }
-
-  .theme-toggle {
-    width: 100%;
-    justify-content: flex-start;
-    padding: var(--spacing-md);
-  }
-
-  .theme-toggle .theme-text {
-    display: inline;
-  }
-
-  .user-menu {
-    width: 100%;
-  }
-
-  .user-avatar {
-    width: 100%;
-    justify-content: flex-start;
-    padding: var(--spacing-md);
-    border-radius: var(--radius-md);
-    height: auto;
-  }
-
-  .user-avatar svg {
-    margin-right: var(--spacing-sm);
-  }
-
-  .user-dropdown {
-    position: static;
-    opacity: 1;
-    visibility: visible;
-    transform: none;
-    margin: 0;
-    margin-top: var(--spacing-xs);
-    box-shadow: none;
-    border: 1px solid var(--color-border);
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height var(--transition-slow);
-  }
-
-  .user-dropdown.active {
-    max-height: 500px;
-  }
-
-  .dropdown-item {
-    font-size: var(--font-size-base);
-  }
-}
-
-@media (max-width: 480px) {
-  .navbar-container {
-    padding: var(--spacing-sm) var(--spacing-md);
-  }
-
-  .tagline {
-    display: none;
-  }
-
   .brand-text h1 {
     font-size: var(--font-size-base);
   }
-
-  .logo-icon {
-    width: 32px;
-    height: 32px;
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/UserDashboard.vue b/src/components/UserDashboard.vue
index 9b6b06a..68d9f65 100644
--- a/src/components/UserDashboard.vue
+++ b/src/components/UserDashboard.vue
@@ -412,6 +412,14 @@ function formatNextWorkoutTime(workout) {
 .dashboard-container {
   min-height: 100vh;
   background: var(--color-background);
+  margin-left: 280px; /* Account for sidebar width */
+  transition: margin-left var(--transition-base);
+}
+
+@media (max-width: 768px) {
+  .dashboard-container {
+    margin-left: 0;
+  }
 }
 
 .dashboard-content {