feat(dash): improved frontend dashboard (#6)

Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com>
Reviewed-on: #6

src/components/sub_nav.rs

@@ -0,0 +1,44 @@
+use crate::app::Route;
+use dioxus::prelude::*;
+
+/// A single tab item for the sub-navigation bar.
+///
+/// # Fields
+///
+/// * `label` - Display text for the tab
+/// * `route` - Route to navigate to when clicked
+#[derive(Clone, PartialEq)]
+pub struct SubNavItem {
+    pub label: &'static str,
+    pub route: Route,
+}
+
+/// Horizontal tab navigation bar used inside nested shell layouts.
+///
+/// Highlights the active tab based on the current route.
+///
+/// # Arguments
+///
+/// * `items` - List of tab items to render
+#[component]
+pub fn SubNav(items: Vec<SubNavItem>) -> Element {
+    let current_route = use_route::<Route>();
+
+    rsx! {
+        nav { class: "sub-nav",
+            for item in &items {
+                {
+                    let is_active = item.route == current_route;
+                    let class = if is_active {
+                        "sub-nav-item sub-nav-item--active"
+                    } else {
+                        "sub-nav-item"
+                    };
+                    rsx! {
+                        Link { class: "{class}", to: item.route.clone(), "{item.label}" }
+                    }
+                }
+            }
+        }
+    }
+}