From 931bd27c65f196843e9bf5f7ef5b92da5afc9168 Mon Sep 17 00:00:00 2001 From: schn33fuchs Date: Sat, 2 May 2026 19:09:41 +0200 Subject: [PATCH] Sidebar fix Styles now actually get applied and sidebar doesn't block content Also the login page doesn't have a sidebar now --- frontend/index.html | 2 +- frontend/src/lib.rs | 50 ++++++++++++++++---- frontend/src/styles/_mixins.scss | 2 + frontend/src/styles/_utilities.scss | 2 + frontend/src/styles/components/_tickets.scss | 3 ++ frontend/src/styles/main.scss | 15 ++++++ 6 files changed, 64 insertions(+), 10 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index e54894f..ca20c57 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ - + Yew App diff --git a/frontend/src/lib.rs b/frontend/src/lib.rs index 54ba270..d608aaf 100644 --- a/frontend/src/lib.rs +++ b/frontend/src/lib.rs @@ -32,49 +32,82 @@ enum Route { NotFound, } +#[derive(Properties, PartialEq)] +pub struct SidebarShellProps { + pub children: Children, +} + +#[component(SidebarShell)] +fn sidebar_shell(props: &SidebarShellProps) -> Html { + html! { +
+ +
+ { for props.children.iter() } +
+
+ } +} + fn switch(route: Route) -> Html { match route { Route::Home => html! { - + + + }, Route::NotFound => html! { }, Route::Ticket => html! { - + + + }, Route::TicketById { id } => html! { - + + + }, Route::AllTickets => html! { - + + + }, Route::Register => html! { - + + + }, Route::Login => html! { }, Route::AllUsers => html! { - + + + }, Route::UserByID { id } => html! { - + + + }, Route::PermissionDenied => html! { }, Route::Diagnostics => html! { - + + + }, } @@ -84,7 +117,6 @@ fn switch(route: Route) -> Html { pub fn app() -> Html { html! { - render={switch} /> } diff --git a/frontend/src/styles/_mixins.scss b/frontend/src/styles/_mixins.scss index 7421725..2837238 100644 --- a/frontend/src/styles/_mixins.scss +++ b/frontend/src/styles/_mixins.scss @@ -1,3 +1,5 @@ +@use "variables" as *; + @mixin card { backgroud: #fff; border-radius: &border-radius; diff --git a/frontend/src/styles/_utilities.scss b/frontend/src/styles/_utilities.scss index 1546d8e..ed174a8 100644 --- a/frontend/src/styles/_utilities.scss +++ b/frontend/src/styles/_utilities.scss @@ -1,3 +1,5 @@ +@use "variables" as *; + .u-hidden { display: none !important; } .u-gap-sm { gap: $spacing-sm; } .text-muted { color: $color-muted; } diff --git a/frontend/src/styles/components/_tickets.scss b/frontend/src/styles/components/_tickets.scss index e18118a..928e663 100644 --- a/frontend/src/styles/components/_tickets.scss +++ b/frontend/src/styles/components/_tickets.scss @@ -1,3 +1,6 @@ +@use "../mixins" as *; +@use "../variables" as *; + .ticket-card { @include card(); border-left: 4px solid $color-accent; diff --git a/frontend/src/styles/main.scss b/frontend/src/styles/main.scss index ace0160..601272a 100644 --- a/frontend/src/styles/main.scss +++ b/frontend/src/styles/main.scss @@ -14,6 +14,21 @@ body { .admin { display: flex; } .content { flex: 1; padding: variables.$spacing-md; } +.layout { + display: flex; + min-height: 100vh; +} + +.sidebar { + width: 260px; + flex-shrink: 0; +} + +.content { + flex: 1; + min-width: 0; +} + @media (max-width: 768px) { .sidebar { position: fixed; left: -100%; transition: left .2s; } .sidebar.open { left: 0; }