added profile section to homepage
This commit is contained in:
@ -38,6 +38,7 @@ pub fn App() -> impl IntoView {
|
||||
use crate::components::sidebar::*;
|
||||
use crate::components::dashboard::*;
|
||||
use crate::components::search::*;
|
||||
use crate::components::personal::*;
|
||||
|
||||
/// Renders the home page of your application.
|
||||
#[component]
|
||||
@ -49,13 +50,14 @@ fn HomePage() -> impl IntoView {
|
||||
|
||||
view! {
|
||||
<div class="home-container">
|
||||
<Sidebar setter=set_dashboard_open />
|
||||
<Sidebar setter=set_dashboard_open active=dashboard_open />
|
||||
<Show
|
||||
when=move || {dashboard_open() == true}
|
||||
fallback=move || view! { <Search /> }
|
||||
>
|
||||
<Dashboard />
|
||||
</Show>
|
||||
<Personal />
|
||||
<PlayBar status=play_status/>
|
||||
<Queue status=play_status/>
|
||||
</div>
|
||||
|
@ -1,3 +1,4 @@
|
||||
pub mod sidebar;
|
||||
pub mod dashboard;
|
||||
pub mod search;
|
||||
pub mod search;
|
||||
pub mod personal;
|
@ -3,7 +3,7 @@ use leptos::*;
|
||||
#[component]
|
||||
pub fn Dashboard() -> impl IntoView {
|
||||
view! {
|
||||
<div class="dashboard-container">
|
||||
<div class="dashboard-container home-component">
|
||||
<h1>Dashboard</h1>
|
||||
</div>
|
||||
}
|
||||
|
25
src/components/personal.rs
Normal file
25
src/components/personal.rs
Normal file
@ -0,0 +1,25 @@
|
||||
use leptos::leptos_dom::*;
|
||||
use leptos::*;
|
||||
use leptos_icons::*;
|
||||
use leptos_icons::CgIcon::*;
|
||||
|
||||
#[component]
|
||||
pub fn Personal() -> impl IntoView {
|
||||
view! {
|
||||
<div class=" personal-container">
|
||||
<Profile />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Profile() -> impl IntoView {
|
||||
view! {
|
||||
<div class="profile-container">
|
||||
<div class="profile-icon">
|
||||
<Icon icon=Icon::from(CgProfile) />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
}
|
@ -4,7 +4,7 @@ use leptos::leptos_dom::*;
|
||||
#[component]
|
||||
pub fn Search() -> impl IntoView {
|
||||
view! {
|
||||
<div class="search-container">
|
||||
<div class="search-container home-component">
|
||||
<h1>Searching...</h1>
|
||||
</div>
|
||||
}
|
||||
|
@ -1,11 +1,11 @@
|
||||
use leptos::*;
|
||||
use leptos::leptos_dom::*;
|
||||
use leptos_icons::AiIcon::*;
|
||||
use leptos::*;
|
||||
use leptos_icons::BiIcon::*;
|
||||
use leptos_icons::OcIcon::*;
|
||||
use leptos_icons::*;
|
||||
|
||||
#[component]
|
||||
pub fn Sidebar(setter: WriteSignal<bool>) -> impl IntoView {
|
||||
pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl IntoView {
|
||||
let open_dashboard = move |_| {
|
||||
setter.update(|value| *value = true);
|
||||
log!("open dashboard");
|
||||
@ -19,16 +19,16 @@ pub fn Sidebar(setter: WriteSignal<bool>) -> impl IntoView {
|
||||
<div class="sidebar-container">
|
||||
<div class="sidebar-top-container">
|
||||
<h2 class="header">LibreTunes</h2>
|
||||
<div class="buttons" on:click=open_dashboard>
|
||||
<div class="buttons" on:click=open_dashboard style={move || if active() {"color: #e1e3e1"} else {""}} >
|
||||
<Icon icon=Icon::from(OcHomeFillLg) />
|
||||
<h1>Dashboard</h1>
|
||||
</div>
|
||||
<div class="buttons" on:click=open_search>
|
||||
<Icon icon=Icon::from(AiSearchOutlined) />
|
||||
<div class="buttons" on:click=open_search style={move || if !active() {"color: #e1e3e1"} else {""}}>
|
||||
<Icon icon=Icon::from(BiSearchRegular) />
|
||||
<h1>Search</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-header">
|
||||
<div class="sidebar-bottom-container">
|
||||
<h1>LibreTunes</h1>
|
||||
</div>
|
||||
|
||||
|
Reference in New Issue
Block a user