eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

Merge branch '38-refactor-navigation-using-leptos-nested-routing' into 'main'

Browse Source 
Use nested routing for navigation

Closes #38

See merge request libretunes/libretunes!24
This commit is contained in:
Ethan Girouard 2024-05-16 21:50:21 -04:00
commit 522658c0dc
3 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app.rs
View File

@ -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 <head>
// id=leptos means cargo-leptos will hot-reload this stylesheet
@ -33,7 +36,11 @@ pub fn App() -> impl IntoView {
}>
<main>
<Routes>
<Route path="" view=HomePage/>
<Route path="" view=move || view! { <HomePage play_status=play_status/> }>
<Route path="" view=Dashboard />
<Route path="dashboard" view=Dashboard />
<Route path="search" view=Search />
</Route>
<Route path="/login" view=Login />
<Route path="/signup" view=Signup />
</Routes>
@ -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<PlayStatus>) -> impl IntoView {
view! {
<div class="home-container">
<Sidebar setter=set_dashboard_open active=dashboard_open />
<Show
when=move || {dashboard_open() == true}
fallback=move || view! { <Search /> }
>
<Dashboard />
</Show>
<Sidebar />
// This <Outlet /> will render the child route components
<Outlet />
<Personal />
<PlayBar status=play_status/>
<Queue status=play_status/>

28
src/components/sidebar.rs
View File

@ -3,28 +3,30 @@ use leptos::*;
use leptos_icons::*;
#[component]
pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> 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! {
<div class="sidebar-container">
<div class="sidebar-top-container">
<h2 class="header">LibreTunes</h2>
<div class="buttons" on:click=open_dashboard style={move || if active() {"color: #e1e3e1"} else {""}} >
<a class="buttons" href="/dashboard" style={move || if on_dashboard() {"color: #e1e3e1"} else {""}} >
<Icon icon=icondata::OcHomeFillLg />
<h1>Dashboard</h1>
</div>
<div class="buttons" on:click=open_search style={move || if !active() {"color: #e1e3e1"} else {""}}>
</a>
<a class="buttons" href="/search" style={move || if on_search() {"color: #e1e3e1"} else {""}}>
<Icon icon=icondata::BiSearchRegular />
<h1>Search</h1>
</div>
</a>
</div>
<Bottom />

1
style/sidebar.scss
View File

@ -25,6 +25,7 @@
transition: all 0.5s;
cursor: pointer;
color: grey;
text-decoration: none;
}
.sidebar-top-container .buttons:hover {
color: white;