Logout button

And styling for it

frontend/Trunk.toml

@@ -1,6 +1,6 @@
 [serve]
 # The address to serve on LAN.
-addresses = ["127.0.0.1"]
+addresses = ["127.0.0.1"] #,"10.150.9.7"]
 # The address to serve on WAN.
 # address = "0.0.0.0"
 # The port to serve on.

frontend/src/pages/sidebar.rs

@@ -215,6 +215,7 @@ pub fn users_menu() -> Html {
 #[component(Sidebar)]
 pub fn sidebar() -> Html {
     let is_admin = use_state(|| None::<bool>);
+    let navigator = use_navigator().expect("Sidebar must be used within a Router");
 
     {
         let is_admin = is_admin.clone();
@@ -238,6 +239,20 @@ pub fn sidebar() -> Html {
         });
     }
 
+    let on_logout = {
+        let navigator = navigator.clone();
+        Callback::from(move |_| {
+            let navigator = navigator.clone();
+            spawn_local(async move {
+                let _ = Request::get("/api/logout")
+                    .credentials(web_sys::RequestCredentials::Include)
+                    .send()
+                    .await;
+                navigator.push(&crate::Route::Login);
+            });
+        })
+    };
+
     match *is_admin {
         None => html! { <div class="sidebar-loading">{ "Loading..." }</div> },
 
@@ -247,6 +262,14 @@ pub fn sidebar() -> Html {
                 <nav class="sidebar user">
                     <ul>
                         <TicketMenu/>
+                        <li class="logout-item">
+                            <button
+                                class="logout-button"
+                                onclick={on_logout.clone()}
+                            >
+                                { "Logout" }
+                            </button>
+                        </li>
                     </ul>
                 </nav>
             </SidebarStateProvider>
@@ -260,6 +283,14 @@ pub fn sidebar() -> Html {
                         <TicketMenu/>
                         <UsersMenu/>
                         <Link<crate::Route> to={crate::Route::Diagnostics}>{ "Statistiken" }</Link<crate::Route>>
+                        <li class="logout-item">
+                            <button
+                                class="logout-button"
+                                onclick={on_logout.clone()}
+                            >
+                                { "Logout" }
+                            </button>
+                        </li>
                     </ul>
                 </nav>
             </SidebarStateProvider>

frontend/src/styles/components/_sidebar.scss

@@ -5,10 +5,12 @@
   width: 260px;
   background: $color-sidebar;
   color: #fff;
-  min-height: 100vh;
+  min-height: 100%;
   padding: $spacing-md;
+  display: flex;
+  flex-direction: column;
 
-  ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: $spacing-sm; }
+  ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: $spacing-sm; flex: 1; }
 
   a, .menu-toggle {
     color: #fff;
@@ -29,6 +31,25 @@
     li { padding: 4px 0; }
   }
 
+  .logout-item {
+    margin-top: auto;
+    border-top: 1px solid rgba(255,255,255,0.1);
+    padding-top: $spacing-sm;
+  }
+
+  .logout-button {
+    background: rgba(255,255,255,0.1);
+    color: #fff;
+    border: 1px solid rgba(255,255,255,0.2);
+    padding: 8px 12px;
+    border-radius: 4px;
+    width: 100%;
+    cursor: pointer;
+    text-align: left;
+    &:hover { background: rgba(255,255,255,0.15); }
+    &:active { background: rgba(255,255,255,0.2); }
+  }
+
   &.user { width: 220px; background: darken($color-sidebar, 6%); }
 }