From 205bcabf5a1fea16aded89cad0e22886e487d44d Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Sat, 12 Jul 2025 15:03:36 +0200
Subject: [PATCH] updated sidebar

---
 assets/styles/sidebar.css | 18 ++++++++++++------
 assets/styles/theme.css   |  6 +++++-
 src/components/sidebar.rs | 19 ++++++-------------
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/assets/styles/sidebar.css b/assets/styles/sidebar.css
index 7656795..f5c2c1c 100644
--- a/assets/styles/sidebar.css
+++ b/assets/styles/sidebar.css
@@ -18,23 +18,29 @@
 
 .sidebar-item {
   text-decoration: none;
-  color: inherit;
-  font: inherit; 
+  color: var(--fg);
+  font: inherit;
   display: flex;
   gap: 20px;
   align-items: center;
   padding-left: 20px;
+  border-radius: 20px;
 }
 
 .sidebar-item p {
   text-decoration: none;
-  color: var(--fg);
-  font: inherit; 
+  color: currentColor;
+  font: inherit;
   font-size: larger;
   font-weight: bold;
   height: max-content;
 }
 
 .sidebar-item svg {
-  color: var(--fg);
-}
\ No newline at end of file
+  color: currentColor;
+}
+
+.sidebar-selected {
+  color: var(--fg-selected);
+  background-color: var(--bg-selected);
+}
diff --git a/assets/styles/theme.css b/assets/styles/theme.css
index aab9464..e47926a 100644
--- a/assets/styles/theme.css
+++ b/assets/styles/theme.css
@@ -25,11 +25,13 @@
   --high: rgb(239, 68, 68);
 
   /* Misc */
-  --bg: #f1f5f9;
   --fg: #0f172a;
+  --bg: #f1f5f9;
   --card-bg: #fff;
   --progress-bg: rgb(226, 232, 240);
   --server-icon-bg: rgb(219 234 254);
+  --fg-selected: #3f475a;
+  --bg-selected: #f1f5f9;
 }
 
 .dark {
@@ -64,6 +66,8 @@
   --card-bg: #141e2f; /* dark card background 141e2f */
   --progress-bg: #27364d;
   --server-icon-bg: #243756;
+  --fg-selected: #f8fafc;
+  --bg-selected: #0f172a;
 }
 
 .black {
diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs
index 47e4fab..ec029dd 100644
--- a/src/components/sidebar.rs
+++ b/src/components/sidebar.rs
@@ -6,22 +6,19 @@ const SIDEBAR_CSS: Asset = asset!("/assets/styles/sidebar.css");
 
 pub struct SideBarItem {
     pub name: &'static str,
-    pub icon: Asset,
-    pub icon_selected: Asset,
+    pub icon: fn() -> Element,
     pub route: Route,
 }
 
 const SIDEBAR_ITEMS: &[SideBarItem] = &[
     SideBarItem {
         name: "Dashboard",
-        icon: asset!("/assets/sidebar/dashboard.svg"),
-        icon_selected: asset!("/assets/sidebar/dashboard-selected.svg"),
+        icon: || rsx!(lucide_dioxus::Gauge { size: 35 }),
         route: Route::Dashboard {},
     },
     SideBarItem {
-        name: "Dashboard",
-        icon: asset!("/assets/sidebar/dashboard.svg"),
-        icon_selected: asset!("/assets/sidebar/dashboard-selected.svg"),
+        name: "Settings",
+        icon: || rsx!(lucide_dioxus::Settings { size: 35 }),
         route: Route::Dashboard {},
     },
 ];
@@ -37,13 +34,9 @@ pub fn SideBar(selected: usize) -> Element {
             for (i, itm) in SIDEBAR_ITEMS.iter().enumerate() {
                 Link {
                     to: itm.route.clone(),
-                    class: "sidebar-item",
+                    class: if i == selected {"sidebar-item sidebar-selected"} else {"sidebar-item"},
 
-                    if selected == i {
-                        img { src: itm.icon_selected, width: "45" }
-                    } else {
-                        img { src: itm.icon, width: "45" }
-                    }
+                    {(itm.icon)()}
 
                     p { "{itm.name}" }
                 }