updated sidebar

assets/styles/sidebar.css

@@ -18,23 +18,29 @@
 
 .sidebar-item {
   text-decoration: none;
-  color: inherit;
+  color: var(--fg);
-  font: inherit; 
+  font: inherit;
   display: flex;
   gap: 20px;
   align-items: center;
   padding-left: 20px;
+  border-radius: 20px;
 }
 
 .sidebar-item p {
   text-decoration: none;
-  color: var(--fg);
+  color: currentColor;
-  font: inherit; 
+  font: inherit;
   font-size: larger;
   font-weight: bold;
   height: max-content;
 }
 
 .sidebar-item svg {
-  color: var(--fg);
+  color: currentColor;
-}
+}
+
+.sidebar-selected {
+  color: var(--fg-selected);
+  background-color: var(--bg-selected);
+}

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 {

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: fn() -> Element,
-    pub icon_selected: Asset,
     pub route: Route,
 }
 
 const SIDEBAR_ITEMS: &[SideBarItem] = &[
     SideBarItem {
         name: "Dashboard",
-        icon: asset!("/assets/sidebar/dashboard.svg"),
+        icon: || rsx!(lucide_dioxus::Gauge { size: 35 }),
-        icon_selected: asset!("/assets/sidebar/dashboard-selected.svg"),
         route: Route::Dashboard {},
     },
     SideBarItem {
-        name: "Dashboard",
+        name: "Settings",
-        icon: asset!("/assets/sidebar/dashboard.svg"),
+        icon: || rsx!(lucide_dioxus::Settings { size: 35 }),
-        icon_selected: asset!("/assets/sidebar/dashboard-selected.svg"),
         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 {
+                    {(itm.icon)()}
-                        img { src: itm.icon_selected, width: "45" }
-                    } else {
-                        img { src: itm.icon, width: "45" }
-                    }
 
                     p { "{itm.name}" }
                 }