Sidebar

README.md

@@ -0,0 +1 @@
+Icons from https://tabler.io/icons

assets/dashboard.css

@@ -9,14 +9,6 @@ body {
   gap: 20px;
 }
 
-#sidebar {
-  background-color: #171b2e;
-  width: 400px;
-  height: 100%;
-  border-top-right-radius: 20px;
-  border-bottom-right-radius: 20px;
-}
-
 .left_container {
   display: grid;
   grid-template-rows: 200px 450px 230px;

assets/sidebar.css

@@ -0,0 +1,40 @@
+#sidebar {
+  box-sizing: border-box;
+  background-color: #171b2e;
+  width: 400px;
+  height: 100%;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  padding: 20px;
+}
+
+@media (max-width: 1000px) {
+  #sidebar {
+    display: none;
+    height: 150px;
+    border-radius: 20px;
+  }
+}
+
+.sidebar-item {
+  text-decoration: none;
+  color: inherit;
+  font: inherit; 
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  padding-left: 20px;
+}
+
+.sidebar-item p {
+  text-decoration: none;
+  color: #fff;
+  font: inherit; 
+  font-size: larger;
+  font-weight: bold;
+  height: max-content;
+}
+
+.sidebar-item svg {
+  color: #fff;
+}

assets/sidebar/dashboard-selected.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="#fff"  class="icon icon-tabler icons-tabler-filled icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2.954a10 10 0 0 1 6.222 17.829a1 1 0 0 1 -.622 .217h-11.2a1 1 0 0 1 -.622 -.217a10 10 0 0 1 6.222 -17.829m4.207 5.839a1 1 0 0 0 -1.414 0l-2.276 2.274a2.003 2.003 0 0 0 -2.514 1.815l-.003 .118a2 2 0 1 0 3.933 -.517l2.274 -2.276a1 1 0 0 0 0 -1.414" /></svg>

assets/sidebar/dashboard.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="#fff"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 13m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M13.45 11.55l2.05 -2.05" /><path d="M6.4 20a9 9 0 1 1 11.2 0z" /></svg>

assets/sidebar/home-selected.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="#fff"  class="icon icon-tabler icons-tabler-filled icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.707 2.293l9 9c.63 .63 .184 1.707 -.707 1.707h-1v6a3 3 0 0 1 -3 3h-1v-7a3 3 0 0 0 -2.824 -2.995l-.176 -.005h-2a3 3 0 0 0 -3 3v7h-1a3 3 0 0 1 -3 -3v-6h-1c-.89 0 -1.337 -1.077 -.707 -1.707l9 -9a1 1 0 0 1 1.414 0m.293 11.707a1 1 0 0 1 1 1v7h-4v-7a1 1 0 0 1 .883 -.993l.117 -.007z" /></svg>

assets/sidebar/home.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="#fff"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>

src/components/mod.rs

@@ -1,4 +1,5 @@
 use dioxus::prelude::*;
+pub mod sidebar;
 
 #[component]
 pub fn LineChart(

src/components/sidebar.rs

@@ -0,0 +1,53 @@
+use dioxus::prelude::*;
+
+use crate::Route;
+
+const SIDEBAR_CSS: Asset = asset!("/assets/sidebar.css");
+
+pub struct SideBarItem {
+    pub name: &'static str,
+    pub icon: Asset,
+    pub icon_selected: Asset,
+    pub route: Route,
+}
+
+const SIDEBAR_ITEMS: &[SideBarItem] = &[
+    SideBarItem {
+        name: "Dashboard",
+        icon: asset!("/assets/sidebar/dashboard.svg"),
+        icon_selected: asset!("/assets/sidebar/dashboard-selected.svg"),
+        route: Route::Dashboard {},
+    },
+    SideBarItem {
+        name: "Dashboard",
+        icon: asset!("/assets/sidebar/dashboard.svg"),
+        icon_selected: asset!("/assets/sidebar/dashboard-selected.svg"),
+        route: Route::Dashboard {},
+    },
+];
+
+#[component]
+pub fn SideBar(selected: usize) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: SIDEBAR_CSS }
+
+        div {
+            id: "sidebar",
+
+            for (i, itm) in SIDEBAR_ITEMS.iter().enumerate() {
+                Link {
+                    to: itm.route.clone(),
+                    class: "sidebar-item",
+
+                    if selected == i {
+                        img { src: itm.icon_selected, width: "45" }
+                    } else {
+                        img { src: itm.icon, width: "45" }
+                    }
+
+                    p { "{itm.name}" }
+                }
+            }
+        }
+    }
+}

src/dashboard.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 
-use crate::components::{LineChart, RadialChart};
+use crate::components::{sidebar::SideBar, LineChart, RadialChart};
 
 const DASHBOARD_CSS: Asset = asset!("/assets/dashboard.css");
 
@@ -12,7 +12,7 @@ pub fn Dashboard() -> Element {
         div {
             class: "container",
 
-            div { id: "sidebar" }
+            SideBar { selected: 0 }
             div {
                 class: "left_container",
                 div { id: "top_container",