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