schn33fuchs/ticketsystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Sidebar fix

Browse Source 
Styles now actually get applied and sidebar doesn't block content
Also the login page doesn't have a sidebar now
This commit is contained in:
Silas
2026-05-02 19:09:41 +02:00
parent 4a3d432e9a
commit 931bd27c65
6 changed files with 64 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<link data-trunk rel="rust" data-bin="bin" /> <link data-trunk rel="rust" data-bin="bin" />
<link rel="scss" href="src/styles/main.scss" /> <link data-trunk rel="scss" href="src/styles/main.scss" />
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Yew App</title> <title>Yew App</title>
</head> </head>

50
frontend/src/lib.rs
View File

@@ -32,49 +32,82 @@ enum Route {
NotFound, 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 { fn switch(route: Route) -> Html {
match route { match route {
Route::Home => html! { Route::Home => html! {
<ProtectedRoute admin_page={false}> <ProtectedRoute admin_page={false}>
<basic_pages::Home/> <SidebarShell>
<basic_pages::Home/>
</SidebarShell>
</ProtectedRoute> </ProtectedRoute>
}, },
Route::NotFound => html! { <basic_pages::NotFound/> }, Route::NotFound => html! { <basic_pages::NotFound/> },
Route::Ticket => html! { Route::Ticket => html! {
<ProtectedRoute admin_page={false}> <ProtectedRoute admin_page={false}>
<ticket::SubmitTicket/> <SidebarShell>
<ticket::SubmitTicket/>
</SidebarShell>
</ProtectedRoute> </ProtectedRoute>
}, },
Route::TicketById { id } => html! { Route::TicketById { id } => html! {
<ProtectedRoute admin_page={true}> <ProtectedRoute admin_page={true}>
<ticket::TicketByID {id}/> <SidebarShell>
<ticket::TicketByID {id}/>
</SidebarShell>
</ProtectedRoute> </ProtectedRoute>
}, },
Route::AllTickets => html! { Route::AllTickets => html! {
<ProtectedRoute admin_page={false}> <ProtectedRoute admin_page={false}>
<ticket::AllTickets/> <SidebarShell>
<ticket::AllTickets/>
</SidebarShell>
</ProtectedRoute> </ProtectedRoute>
}, },
Route::Register => html! { Route::Register => html! {
<ProtectedRoute admin_page={true}> <ProtectedRoute admin_page={true}>
<user::Register/> <SidebarShell>
<user::Register/>
</SidebarShell>
</ProtectedRoute> </ProtectedRoute>
}, },
Route::Login => html! { <user::Login/> }, Route::Login => html! { <user::Login/> },
Route::AllUsers => html! { Route::AllUsers => html! {
<ProtectedRoute admin_page={true}> <ProtectedRoute admin_page={true}>
<user::AllUsers/> <SidebarShell>
<user::AllUsers/>
</SidebarShell>
</ProtectedRoute> </ProtectedRoute>
}, },
Route::UserByID { id } => html! { Route::UserByID { id } => html! {
<ProtectedRoute admin_page={true}> <ProtectedRoute admin_page={true}>
<user::UserByID {id}/> <SidebarShell>
<user::UserByID {id}/>
</SidebarShell>
</ProtectedRoute> </ProtectedRoute>
}, },
Route::PermissionDenied => html! { <basic_pages::PermissionDenied/> }, Route::PermissionDenied => html! { <basic_pages::PermissionDenied/> },
Route::Diagnostics => html! { Route::Diagnostics => html! {
<ProtectedRoute admin_page={true}> <ProtectedRoute admin_page={true}>
<utilities::Diagnostics/> <SidebarShell>
<utilities::Diagnostics/>
</SidebarShell>
</ProtectedRoute> </ProtectedRoute>
}, },
} }
@@ -84,7 +117,6 @@ fn switch(route: Route) -> Html {
pub fn app() -> Html { pub fn app() -> Html {
html! { html! {
<BrowserRouter> <BrowserRouter>
<sidebar::Sidebar/>
<Switch<Route> render={switch} /> <Switch<Route> render={switch} />
</BrowserRouter> </BrowserRouter>
} }

2
frontend/src/styles/_mixins.scss
View File

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

2
frontend/src/styles/_utilities.scss
View File

@@ -1,3 +1,5 @@
@use "variables" as *;
.u-hidden { display: none !important; } .u-hidden { display: none !important; }
.u-gap-sm { gap: $spacing-sm; } .u-gap-sm { gap: $spacing-sm; }
.text-muted { color: $color-muted; } .text-muted { color: $color-muted; }

3
frontend/src/styles/components/_tickets.scss
View File

@@ -1,3 +1,6 @@
@use "../mixins" as *;
@use "../variables" as *;
.ticket-card { .ticket-card {
@include card(); @include card();
border-left: 4px solid $color-accent; border-left: 4px solid $color-accent;

15
frontend/src/styles/main.scss
View File

@@ -14,6 +14,21 @@ body {
.admin { display: flex; } .admin { display: flex; }
.content { flex: 1; padding: variables.$spacing-md; } .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) { @media (max-width: 768px) {
.sidebar { position: fixed; left: -100%; transition: left .2s; } .sidebar { position: fixed; left: -100%; transition: left .2s; }
.sidebar.open { left: 0; } .sidebar.open { left: 0; }