Logout button

And styling for it

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>