🐞 fix: menu selected

examples/basic/Cargo.toml

@@ -9,4 +9,6 @@ edition = "2021"
 leptos = { version = "0.3.0", features = ["stable"] }
 melt-ui = { path = "../../" }
 leptos_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined"] }
-leptos_router = { version = "0.3.0", features = ["csr"] }
+leptos_router = { version = "0.3.0", features = ["csr"] }
+
+regex = "1.8.2"

examples/basic/src/components.rs

@@ -1,21 +1,39 @@
 use leptos::*;
-use leptos_router::{Outlet, use_route, use_router};
+use leptos_router::{use_location, Outlet, use_navigate};
 use melt_ui::*;
+use regex::Regex;
 
 #[component]
 pub fn ComponentsPage(cx: Scope) -> impl IntoView {
-    let router = use_router(cx);
-    let route = use_route(cx);
+    let loaction = use_location(cx);
+    let navigate = use_navigate(cx);
     let selected = create_rw_signal(cx, String::from(""));
     create_effect(cx, move |_| {
-        let path = route.original_path();
-        let path2 = route.path();
-        log!("{:?} {}", path, path2);
+        let pathname = loaction.pathname.get();
+
+        let re = Regex::new(r"^/components/(.+)$").unwrap();
+        let Some(caps) = re.captures(&pathname) else {
+            return;
+        };
+        let Some(path) = caps.get(1) else {
+            return;
+        };
+        let path = path.as_str().to_string();
+        selected.set(path);
+    });
+
+    create_effect(cx, move |value| {
+        let selected = selected.get();
+        if value.is_some() {
+            _ = navigate(&format!("/components/{selected}"), Default::default());
+        }
+        selected
     });
     view! {cx,
         <div class="components-page-box">
             <aside>
                 <Menu selected>
+                    <MenuItem key="menu" label="menu" />
                     <MenuItem key="slider" label="slider" />
                 </Menu>
             </aside>

examples/basic/src/pages/menu/mod.rs

@@ -5,9 +5,12 @@ use melt_ui::*;
 pub fn MenuPage(cx: Scope) -> impl IntoView {
     let selected = create_rw_signal(cx, String::from("o"));
     view! { cx,
-        <Menu selected>
-            <MenuItem key="a" label="and"/>
-            <MenuItem key="o" label="or"/>
-        </Menu>
+        <>
+            { move || selected.get() }
+            <Menu selected>
+                <MenuItem key="a" label="and"/>
+                <MenuItem key="o" label="or"/>
+            </Menu>
+        </>
     }
 }

src/menu/menu_item.rs

@@ -13,7 +13,7 @@ pub fn MenuItem(
     let theme = use_theme(cx, Theme::light);
     let menu = use_menu(cx);
     let onclick_select = move |_| {
-        menu.set(MenuInjectionKey::from_string(cx, key.get().to_string()));
+        menu.set(MenuInjectionKey::new(key.get().to_string()));
     };
 
     let css_vars = create_memo(cx, move |_| {
@@ -28,7 +28,7 @@ pub fn MenuItem(
     });
     view! {cx, class=class_name,
         <div class="melt-menu-item">
-            <div class="melt-menu-item__content" class=("melt-menu-item__content--selected", move || menu.get().value() == key.get()) on:click=onclick_select style=move || css_vars.get()>
+            <div class="melt-menu-item__content" class=("melt-menu-item__content--selected", move || menu.get().value == key.get()) on:click=onclick_select style=move || css_vars.get()>
                 { move || label.get() }
             </div>
         </div>

src/menu/mod.rs

@@ -9,7 +9,22 @@ pub fn Menu(
     #[prop(into)] selected: RwSignal<String>,
     children: Children,
 ) -> impl IntoView {
-    let menu_injection_key = create_rw_signal(cx, MenuInjectionKey::new(selected));
+    let menu_injection_key = create_rw_signal(cx, MenuInjectionKey::new(selected.get()));
+    create_effect(cx, move |_| {
+        let selected_key = selected.get();
+        let key = menu_injection_key.get_untracked();
+        if selected_key != key.value {
+            menu_injection_key.set(MenuInjectionKey::new(selected_key));
+        }
+    });
+
+    create_effect(cx, move |_| {
+        let selected_key = selected.get_untracked();
+        let key = menu_injection_key.get();
+        if selected_key != key.value {
+            selected.set(key.value);
+        }
+    });
     provide_context(cx, menu_injection_key);
     view! {cx,
         <div class="melt-menu">
@@ -20,24 +35,14 @@ pub fn Menu(
 
 #[derive(Clone)]
 pub struct MenuInjectionKey {
-    value: RwSignal<String>,
+    value: String,
 }
 
 
 impl MenuInjectionKey {
-    pub fn new(value: RwSignal<String>) -> Self {
+    pub fn new(value: String) -> Self {
         Self { value }
     }
-
-    pub fn from_string(cx: Scope, value: String) -> Self {
-        Self {
-            value: create_rw_signal(cx, value),
-        }
-    }
-
-    pub fn value(&self) -> String {
-        self.value.get()
-    }
 }
 
 pub fn use_menu(cx: Scope) -> RwSignal<MenuInjectionKey> {