feat: NavItem adds icon prop

demo/src/app.rs

@@ -84,6 +84,7 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
                         <Route path=StaticSegment("layout") view=LayoutMdPage/>
                         <Route path=StaticSegment("loading-bar") view=LoadingBarMdPage/>
                         <Route path=StaticSegment("message-bar") view=MessageBarMdPage/>
+                        <Route path=StaticSegment("nav") view=NavMdPage/>
                         <Route path=StaticSegment("popover") view=PopoverMdPage/>
                         <Route path=StaticSegment("progress-bar") view=ProgressBarMdPage/>
                         <Route path=StaticSegment("radio") view=RadioMdPage/>

demo/src/pages/components.rs

@@ -226,6 +226,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "/components/message-bar".into(),
                     label: "Message Bar".into(),
                 },
+                MenuItemOption {
+                    value: "/components/nav".into(),
+                    label: "Nav".into(),
+                },
                 MenuItemOption {
                     value: "/components/popover".into(),
                     label: "Popover".into(),

demo_markdown/docs/nav/mod.md

@@ -0,0 +1,20 @@
+# Nav
+
+```rust demo
+
+view! {
+    <NavDrawer>
+        <NavItem
+            icon=icondata::AiGithubOutlined
+            value="github"
+            href="https://github.com/thaw-ui/thaw"
+            attr:target="_blank"
+        >
+            "Github"
+        </NavItem>
+        <NavItem icon=icondata::AiChromeOutlined value="chrome">
+            "Chrome"
+        </NavItem>
+    </NavDrawer>
+}
+```

demo_markdown/src/lib.rs

@@ -53,6 +53,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
         "LoadingBarMdPage" => "../docs/loading_bar/mod.md",
         "MenuMdPage" => "../docs/menu/mod.md",
         "MessageBarMdPage" => "../docs/message_bar/mod.md",
+        "NavMdPage" => "../docs/nav/mod.md",
         "PopoverMdPage" => "../docs/popover/mod.md",
         "ProgressBarMdPage" => "../docs/progress_bar/mod.md",
         "RadioMdPage" => "../docs/radio/mod.md",

thaw/src/nav/nav-drawer.css

@@ -44,8 +44,9 @@
     position: relative;
     justify-content: start;
     gap: var(--spacingVerticalL);
+    width: 100%;
     padding: var(--spacingVerticalMNudge);
-    /* background-color: var(--colorNeutralBackground4); */
+    background-color: inherit;
     border-radius: var(--borderRadiusMedium);
     color: var(--colorNeutralForeground2);
     text-decoration-line: none;

thaw/src/nav/nav_item.rs

@@ -1,11 +1,13 @@
-use crate::use_nav_drawer;
+use crate::{use_nav_drawer, Icon};
-use leptos::prelude::*;
+use leptos::{either::Either, prelude::*};
 use thaw_utils::{class_list, StoredMaybeSignal};
 
 #[component]
 pub fn NavItem(
     #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(optional, into)] icon: MaybeProp<icondata_core::Icon>,
     #[prop(into)] value: MaybeSignal<String>,
+    #[prop(optional, into)] href: Option<MaybeSignal<String>>,
     children: Children,
 ) -> impl IntoView {
     let nav_drawer = use_nav_drawer();
@@ -16,13 +18,42 @@ pub fn NavItem(
             nav_drawer.0.set(value);
         }
     };
-    view! {
+
-        <a class=class_list!["thaw-nav-item", ("thaw-nav-item--selected", move || nav_drawer.0.get() == value.get()), class]
+    let children = || {
-            role="nav"
+        view! {
-            type="navigation"
+            {
-            on:click=on_click
+                move || {
-        >
+                    if let Some(icon) = icon.get() {
+                        Either::Left(view! {
+                            <Icon icon=icon style="font-size: 20px"/>
+                        })
+                    } else {
+                        Either::Right(())
+                    }
+                }
+            }
             {children()}
-        </a>
+        }
+    };
+
+    if let Some(href) = href {
+        Either::Left(view! {
+            <a
+                class=class_list!["thaw-nav-item", ("thaw-nav-item--selected", move || nav_drawer.0.get() == value.get()), class]
+                href=move || href.get()
+                on:click=on_click
+            >
+                {children()}
+            </a>
+        })
+    } else {
+        Either::Right(view! {
+            <button
+                class=class_list!["thaw-nav-item", ("thaw-nav-item--selected", move || nav_drawer.0.get() == value.get()), class]
+                on:click=on_click
+            >
+                {children()}
+            </button>
+        })
     }
 }