From ff43b3f7e84380b0c2ccfa8d03c95a1084e6728c Mon Sep 17 00:00:00 2001 From: Ethan Girouard Date: Sun, 12 May 2024 11:00:47 -0400 Subject: [PATCH] Use nested routing for navigation Remove dashboard_open signal Use tags to navigate to new pages Add dashboard and search to nested routing --- src/app.rs | 26 ++++++++++++-------------- src/components/sidebar.rs | 28 +++++++++++++++------------- style/sidebar.scss | 1 + 3 files changed, 28 insertions(+), 27 deletions(-) diff --git a/src/app.rs b/src/app.rs index 946b4c2..c7b7fe4 100644 --- a/src/app.rs +++ b/src/app.rs @@ -14,6 +14,9 @@ pub fn App() -> impl IntoView { // Provides context that manages stylesheets, titles, meta tags, etc. provide_meta_context(); + let play_status = PlayStatus::default(); + let play_status = create_rw_signal(play_status); + view! { // injects a stylesheet into the document // id=leptos means cargo-leptos will hot-reload this stylesheet @@ -33,7 +36,11 @@ pub fn App() -> impl IntoView { }>
- + }> + + + + @@ -49,21 +56,12 @@ use crate::components::personal::*; /// Renders the home page of your application. #[component] -fn HomePage() -> impl IntoView { - let play_status = PlayStatus::default(); - let play_status = create_rw_signal(play_status); - - let (dashboard_open, set_dashboard_open) = create_signal(true); - +fn HomePage(play_status: RwSignal) -> impl IntoView { view! {
- - } - > - - + + // This will render the child route components + diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs index 805fa4e..0621704 100644 --- a/src/components/sidebar.rs +++ b/src/components/sidebar.rs @@ -3,28 +3,30 @@ use leptos::*; use leptos_icons::*; #[component] -pub fn Sidebar(setter: WriteSignal, active: ReadSignal) -> impl IntoView { - let open_dashboard = move |_| { - setter.update(|value| *value = true); - log!("open dashboard"); - }; - let open_search = move |_| { - setter.update(|value| *value = false); - log!("open search"); - }; +pub fn Sidebar() -> impl IntoView { + use leptos_router::use_location; + let location = use_location(); + + let on_dashboard = Signal::derive( + move || location.pathname.get().starts_with("/dashboard") || location.pathname.get() == "/", + ); + + let on_search = Signal::derive( + move || location.pathname.get().starts_with("/search"), + ); view! {

LibreTunes

-
+

Dashboard

-
-
+ +

Search

-
+
diff --git a/style/sidebar.scss b/style/sidebar.scss index 2eb8c72..e101fc4 100644 --- a/style/sidebar.scss +++ b/style/sidebar.scss @@ -25,6 +25,7 @@ transition: all 0.5s; cursor: pointer; color: grey; + text-decoration: none; } .sidebar-top-container .buttons:hover { color: white;