Replace top navbar with left sidebar navigation

- Convert horizontal top navbar to vertical left sidebar
- Sidebar features gradient background and fixed positioning
- Main content area adjusts with left margin to accommodate sidebar
- Mobile responsive: sidebar becomes horizontal top bar on smaller screens
- Enhanced navigation styling with hover effects and smooth transitions
- Improved space utilization for calendar view

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/app.rs

@@ -40,26 +40,19 @@ pub fn App() -> Html {
     html! {
         <BrowserRouter>
             <div class="app">
-                <header class="app-header">
-                    <h1>{"Calendar App"}</h1>
                 {
                     if auth_token.is_some() {
                         html! {
-                                <nav>
+                            <>
-                                    <Link<Route> to={Route::Calendar}>{"Calendar"}</Link<Route>>
+                                <aside class="app-sidebar">
+                                    <div class="sidebar-header">
+                                        <h1>{"Calendar App"}</h1>
+                                    </div>
+                                    <nav class="sidebar-nav">
+                                        <Link<Route> to={Route::Calendar} classes="nav-link">{"Calendar"}</Link<Route>>
                                         <button onclick={on_logout} class="logout-button">{"Logout"}</button>
                                     </nav>
-                            }
+                                </aside>
-                        } else {
-                            html! {
-                                <nav>
-                                    <Link<Route> to={Route::Login}>{"Login"}</Link<Route>>
-                                </nav>
-                            }
-                        }
-                    }
-                </header>
-
                                 <main class="app-main">
                                     <Switch<Route> render={move |route| {
                                         let auth_token = (*auth_token).clone();
@@ -90,6 +83,43 @@ pub fn App() -> Html {
                                         }
                                     }} />
                                 </main>
+                            </>
+                        }
+                    } else {
+                        html! {
+                            <div class="login-layout">
+                                <Switch<Route> render={move |route| {
+                                    let auth_token = (*auth_token).clone();
+                                    let on_login = on_login.clone();
+                                    
+                                    match route {
+                                        Route::Home => {
+                                            if auth_token.is_some() {
+                                                html! { <Redirect<Route> to={Route::Calendar}/> }
+                                            } else {
+                                                html! { <Redirect<Route> to={Route::Login}/> }
+                                            }
+                                        }
+                                        Route::Login => {
+                                            if auth_token.is_some() {
+                                                html! { <Redirect<Route> to={Route::Calendar}/> }
+                                            } else {
+                                                html! { <Login {on_login} /> }
+                                            }
+                                        }
+                                        Route::Calendar => {
+                                            if auth_token.is_some() {
+                                                html! { <CalendarView /> }
+                                            } else {
+                                                html! { <Redirect<Route> to={Route::Login}/> }
+                                            }
+                                        }
+                                    }
+                                }} />
+                            </div>
+                        }
+                    }
+                }
             </div>
         </BrowserRouter>
     }

styles.css

@@ -14,48 +14,79 @@ body {
 .app {
     min-height: 100vh;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
 }
 
-.app-header {
+.login-layout {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
-    color: white;
-    padding: 1rem 2rem;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    align-items: center;
+    width: 100%;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
-.app-header h1 {
+/* Sidebar Styles */
+.app-sidebar {
+    width: 280px;
+    min-height: 100vh;
+    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 100;
+}
+
+.sidebar-header {
+    padding: 2rem 1.5rem 1.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+}
+
+.sidebar-header h1 {
     margin: 0;
     font-size: 1.8rem;
+    font-weight: 600;
+    text-align: center;
 }
 
-.app-header nav {
+.sidebar-nav {
+    flex: 1;
+    padding: 1.5rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.sidebar-nav .nav-link {
+    color: white;
+    text-decoration: none;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    transition: all 0.2s;
+    font-weight: 500;
     display: flex;
-    gap: 1rem;
     align-items: center;
 }
 
-.app-header nav a {
+.sidebar-nav .nav-link:hover {
-    color: white;
+    background-color: rgba(255,255,255,0.15);
-    text-decoration: none;
+    transform: translateX(4px);
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    transition: background-color 0.2s;
 }
 
-.app-header nav a:hover {
+.sidebar-nav .nav-link.active {
     background-color: rgba(255,255,255,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .app-main {
     flex: 1;
+    margin-left: 280px;
     padding: 2rem;
-    max-width: 1200px;
+    max-width: calc(100% - 280px);
-    margin: 0 auto;
+    width: calc(100% - 280px);
-    width: 100%;
+    box-sizing: border-box;
 }
 
 /* Authentication Forms */
@@ -161,22 +192,26 @@ body {
 }
 
 .logout-button {
-    background: rgba(255,255,255,0.2);
+    background: rgba(255,255,255,0.1);
-    border: 1px solid rgba(255,255,255,0.3);
+    border: 1px solid rgba(255,255,255,0.2);
     color: white;
-    padding: 0.5rem 1rem;
+    padding: 0.75rem 1rem;
-    border-radius: 4px;
+    border-radius: 8px;
     cursor: pointer;
-    transition: background-color 0.2s;
+    transition: all 0.2s;
+    font-weight: 500;
+    margin-top: auto;
+    margin-bottom: 1rem;
 }
 
 .logout-button:hover {
-    background: rgba(255,255,255,0.3);
+    background: rgba(255,255,255,0.2);
+    transform: translateX(4px);
 }
 
 /* Calendar View */
 .calendar-view {
-    height: calc(100vh - 140px); /* Full height minus header and padding */
+    height: calc(100vh - 4rem); /* Full height minus main padding */
     display: flex;
     flex-direction: column;
 }
@@ -492,6 +527,54 @@ body {
 
 /* Responsive Design */
 @media (max-width: 768px) {
+    .app-sidebar {
+        width: 100%;
+        height: auto;
+        min-height: unset;
+        position: relative;
+        flex-direction: row;
+        padding: 1rem;
+    }
+
+    .sidebar-header {
+        padding: 0;
+        border-bottom: none;
+        border-right: 1px solid rgba(255,255,255,0.2);
+        margin-right: 1rem;
+    }
+
+    .sidebar-header h1 {
+        font-size: 1.4rem;
+        text-align: left;
+        margin: 0;
+    }
+
+    .sidebar-nav {
+        flex-direction: row;
+        padding: 0;
+        align-items: center;
+        gap: 1rem;
+        flex: 1;
+    }
+
+    .sidebar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.9rem;
+    }
+
+    .logout-button {
+        margin: 0;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.9rem;
+    }
+
+    .app-main {
+        margin-left: 0;
+        max-width: 100%;
+        width: 100%;
+        padding: 1rem;
+    }
+
     .calendar-header {
         padding: 1rem;
     }
@@ -520,12 +603,8 @@ body {
         font-size: 1rem;
     }
 
-    .app-main {
-        padding: 1rem;
-    }
-
     .calendar-view {
-        height: calc(100vh - 120px);
+        height: calc(100vh - 8rem);
     }
 }
 
@@ -569,20 +648,6 @@ body {
         font-size: 0.9rem;
     }
 
-    .app-header {
-        flex-direction: column;
-        text-align: center;
-        padding: 1rem;
-    }
-
-    .app-header nav {
-        margin-top: 1rem;
-    }
-
-    .app-main {
-        padding: 1rem;
-    }
-
     .login-form, .register-form {
         padding: 1.5rem;
     }