diff --git a/README.md b/README.md
index e69de29..1e006a4 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1 @@
+Icons from https://tabler.io/icons
\ No newline at end of file
diff --git a/assets/dashboard.css b/assets/dashboard.css
index 5f1afab..db40365 100644
--- a/assets/dashboard.css
+++ b/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;
diff --git a/assets/sidebar.css b/assets/sidebar.css
new file mode 100644
index 0000000..e2d1bcc
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/assets/sidebar/dashboard-selected.svg b/assets/sidebar/dashboard-selected.svg
new file mode 100644
index 0000000..c69e755
--- /dev/null
+++ b/assets/sidebar/dashboard-selected.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/sidebar/dashboard.svg b/assets/sidebar/dashboard.svg
new file mode 100644
index 0000000..7832351
--- /dev/null
+++ b/assets/sidebar/dashboard.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/sidebar/home-selected.svg b/assets/sidebar/home-selected.svg
new file mode 100644
index 0000000..2cd65e7
--- /dev/null
+++ b/assets/sidebar/home-selected.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/sidebar/home.svg b/assets/sidebar/home.svg
new file mode 100644
index 0000000..3a5a978
--- /dev/null
+++ b/assets/sidebar/home.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 6567b08..a723397 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -1,4 +1,5 @@
use dioxus::prelude::*;
+pub mod sidebar;
#[component]
pub fn LineChart(
diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs
new file mode 100644
index 0000000..109a042
--- /dev/null
+++ b/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}" }
+ }
+ }
+ }
+ }
+}
diff --git a/src/dashboard.rs b/src/dashboard.rs
index 5b55182..6885ee0 100644
--- a/src/dashboard.rs
+++ b/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",