feat: improved NavCategory

demo_markdown/docs/nav/mod.md

@@ -4,6 +4,34 @@
 
 view! {
     <NavDrawer>
+        <NavCategory value="area">
+            <NavCategoryItem slot icon=icondata::AiAreaChartOutlined>
+                "Area Chart"
+            </NavCategoryItem>
+            <NavSubItem value="target">
+                "Target"
+            </NavSubItem>
+            <NavSubItem value="above">
+                "Above"
+            </NavSubItem>
+            <NavSubItem value="below">
+                "Below"
+            </NavSubItem>
+        </NavCategory>
+        <NavCategory value="pie">
+            <NavCategoryItem slot icon=icondata::AiPieChartOutlined>
+                "Pie Chart"
+            </NavCategoryItem>
+            <NavSubItem value="pie-target">
+                "Pie Target"
+            </NavSubItem>
+            <NavSubItem value="pin-above">
+                "Pin Above"
+            </NavSubItem>
+            <NavSubItem value="pin-below">
+                "Pin Below"
+            </NavSubItem>
+        </NavCategory>
         <NavItem
             icon=icondata::AiGithubOutlined
             value="github"

thaw/src/nav/nav-drawer.css

@@ -104,6 +104,15 @@
         padding-top 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.thaw-nav-category-item__expand-icon {
+    margin-inline-start: auto;
+    height: 20px;
+}
+
 .thaw-nav-sub-item {
     padding-inline-start: 46px;
 }
+
+.thaw-nav-sub-item.thaw-nav-item--selected::after {
+    margin-inline-start: -54px;
+}

thaw/src/nav/nav_category.rs

@@ -13,24 +13,58 @@ pub fn NavCategory(
     let nav_drawer = NavDrawerInjection::expect_context();
     let value: StoredMaybeSignal<_> = value.into();
     let group_ref = NodeRef::<html::Div>::new();
-    let on_click = move |_| {
-        let value = value.get_untracked();
-        if nav_drawer
-            .selected_category_value
-            .with_untracked(|selected_category_value| selected_category_value != Some(&value))
-        {
-            nav_drawer.selected_category_value.set(Some(value));
-        }
-    };
-
     let is_show_group = Memo::new(move |_| {
         nav_drawer
             .selected_category_value
-            .with_untracked(|selected_category_value| {
+            .with(|selected_category_value| {
-                value.with_untracked(|value| selected_category_value == Some(value))
+                value.with(|value| match selected_category_value {
+                    (None, None, Some(v)) => v.contains(value),
+                    (None, Some(v), None) => v.as_ref() == Some(value),
+                    (Some(v), None, None) => v == value,
+                    _ => unreachable!(),
+                })
             })
     });
 
+    let on_click = move |_| {
+        let value = value.get_untracked();
+        let is_show_group = is_show_group.get_untracked();
+        nav_drawer
+            .selected_category_value
+            .update(|selected_category_value| {
+                match selected_category_value {
+                    (None, None, Some(v)) => {
+                        if is_show_group {
+                            if let Some(index) = v.iter().position(|item| item == &value) {
+                                v.remove(index);
+                            }
+                        } else {
+                            v.push(value);
+                        }
+                    }
+                    (None, Some(v), None) => {
+                        if is_show_group {
+                            *v = None;
+                        } else {
+                            *v = Some(value);
+                        }
+                    }
+                    (Some(v), None, None) => {
+                        if is_show_group {
+                            v.clear();
+                        } else {
+                            *v = value;
+                        }
+                    }
+                    _ => unreachable!(),
+                }
+
+                if is_show_group {
+                } else {
+                }
+            });
+    };
+
     let NavCategoryItem {
         class: item_class,
         icon: item_icon,

thaw/src/nav/nav_drawer.rs

@@ -1,13 +1,13 @@
 use crate::Scrollbar;
 use leptos::{context::Provider, prelude::*};
 use thaw_components::OptionComp;
-use thaw_utils::{class_list, mount_style, OptionModel};
+use thaw_utils::{class_list, mount_style, OptionModel, VecModel};
 
 #[component]
 pub fn NavDrawer(
     #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] selected_value: OptionModel<String>,
-    #[prop(optional, into)] selected_category_value: OptionModel<String>,
+    #[prop(default = vec![].into(), into)] selected_category_value: VecModel<String>,
     children: Children,
     #[prop(optional)] nav_drawer_header: Option<NavDrawerHeader>,
     #[prop(optional)] nav_drawer_footer: Option<NavDrawerFooter>,
@@ -46,7 +46,7 @@ pub struct NavDrawerFooter {
 #[derive(Clone)]
 pub(crate) struct NavDrawerInjection {
     pub selected_value: OptionModel<String>,
-    pub selected_category_value: OptionModel<String>,
+    pub selected_category_value: VecModel<String>,
 }
 
 impl NavDrawerInjection {

thaw/src/nav/nav_item.rs

@@ -41,9 +41,9 @@ pub fn NavItem(
     };
 
     let selected = Memo::new(move |_| {
-        nav_drawer.selected_value.with_untracked(|selected_value| {
+        nav_drawer
-            value.with_untracked(|value| selected_value == Some(value))
+            .selected_value
-        })
+            .with(|selected_value| value.with(|value| selected_value == Some(value)))
     });
 
     if let Some(href) = href {