Sidebar fix

Styles now actually get applied and sidebar doesn't block content
Also the login page doesn't have a sidebar now

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! {
+        <div class="layout">
+            <sidebar::Sidebar/>
+            <main class="content">
+                { for props.children.iter() }
+            </main>
+        </div>
+    }
+}
+
 fn switch(route: Route) -> Html {
     match route {
         Route::Home => html! {
             <ProtectedRoute admin_page={false}>
-                <basic_pages::Home/>
+                <SidebarShell>
+                    <basic_pages::Home/>
+                </SidebarShell>
             </ProtectedRoute>
         },
         Route::NotFound => html! { <basic_pages::NotFound/> },
         Route::Ticket => html! {
             <ProtectedRoute admin_page={false}>
-                <ticket::SubmitTicket/>
+                <SidebarShell>
+                    <ticket::SubmitTicket/>
+                </SidebarShell>
             </ProtectedRoute>
         },
         Route::TicketById { id } => html! {
             <ProtectedRoute admin_page={true}>
-                <ticket::TicketByID {id}/>
+                <SidebarShell>
+                    <ticket::TicketByID {id}/>
+                </SidebarShell>
             </ProtectedRoute>
         },
         Route::AllTickets => html! {
             <ProtectedRoute admin_page={false}>
-                <ticket::AllTickets/>
+                <SidebarShell>
+                    <ticket::AllTickets/>
+                </SidebarShell>
             </ProtectedRoute>
         },
         Route::Register => html! {
             <ProtectedRoute admin_page={true}>
-                <user::Register/>
+                <SidebarShell>
+                    <user::Register/>
+                </SidebarShell>
             </ProtectedRoute>
         },
         Route::Login => html! { <user::Login/> },
         Route::AllUsers => html! {
             <ProtectedRoute admin_page={true}>
-                <user::AllUsers/>
+                <SidebarShell>
+                    <user::AllUsers/>
+                </SidebarShell>
             </ProtectedRoute>
         },
         Route::UserByID { id } => html! {
             <ProtectedRoute admin_page={true}>
-                <user::UserByID {id}/>
+                <SidebarShell>
+                    <user::UserByID {id}/>
+                </SidebarShell>
             </ProtectedRoute>
         },
         Route::PermissionDenied => html! { <basic_pages::PermissionDenied/> },
         Route::Diagnostics => html! {
             <ProtectedRoute admin_page={true}>
-                <utilities::Diagnostics/>
+                <SidebarShell>
+                    <utilities::Diagnostics/>
+                </SidebarShell>
             </ProtectedRoute>
         },
     }
@@ -84,7 +117,6 @@ fn switch(route: Route) -> Html {
 pub fn app() -> Html {
     html! {
         <BrowserRouter>
-            <sidebar::Sidebar/>
             <Switch<Route> render={switch} />
         </BrowserRouter>
     }

frontend/src/styles/_mixins.scss

@@ -1,3 +1,5 @@
+@use "variables" as *;
+
 @mixin card {
   backgroud: #fff;
   border-radius: &border-radius;

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; }

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;

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; }