diff --git a/frontend/Trunk.toml b/frontend/Trunk.toml index a981fdf..f218f3a 100644 --- a/frontend/Trunk.toml +++ b/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. diff --git a/frontend/src/pages/sidebar.rs b/frontend/src/pages/sidebar.rs index 73c093f..49f7f2a 100644 --- a/frontend/src/pages/sidebar.rs +++ b/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::); + 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! { }, @@ -247,6 +262,14 @@ pub fn sidebar() -> Html { @@ -260,6 +283,14 @@ pub fn sidebar() -> Html { to={crate::Route::Diagnostics}>{ "Statistiken" }> +
  • + +
  • diff --git a/frontend/src/styles/components/_sidebar.scss b/frontend/src/styles/components/_sidebar.scss index ef12868..110eaab 100644 --- a/frontend/src/styles/components/_sidebar.scss +++ b/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%); } }