From a7368aec30bc521dbdf77ac43d4e9ed9d3fc8a89 Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Thu, 14 Mar 2024 10:56:35 -0400 Subject: [PATCH] create dashboard/search toggle. modified: Cargo.lock modified: Cargo.toml modified: src/app.rs modified: src/components.rs new file: src/components/search.rs modified: src/components/sidebar.rs modified: src/pages/signup.rs modified: style/dashboard.scss modified: style/main.scss new file: style/search.scss modified: style/sidebar.scss --- Cargo.lock | 10 ++++++++++ Cargo.toml | 4 +++- src/app.rs | 18 ++++++++++++++---- src/components.rs | 3 ++- src/components/search.rs | 11 +++++++++++ src/components/sidebar.rs | 37 ++++++++++++++++++++++++++----------- src/pages/signup.rs | 1 - style/dashboard.scss | 10 +++++----- style/main.scss | 1 + style/search.scss | 8 ++++++++ style/sidebar.scss | 33 ++++++++++++++++++++++++++++++--- 11 files changed, 110 insertions(+), 26 deletions(-) create mode 100644 src/components/search.rs create mode 100644 style/search.scss diff --git a/Cargo.lock b/Cargo.lock index 195bd07..645a1e7 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1314,6 +1314,7 @@ dependencies = [ "icondata_cg", "icondata_core", "icondata_io", + "icondata_oc", "icondata_ri", ] @@ -1359,6 +1360,15 @@ dependencies = [ "icondata_core", ] +[[package]] +name = "icondata_oc" +version = "0.0.8" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "667cb0b74516ec3d4ce357b9ec94189eab6e1bfe5a4a28b5e36579028a8075b1" +dependencies = [ + "icondata_core", +] + [[package]] name = "icondata_ri" version = "0.0.8" diff --git a/Cargo.toml b/Cargo.toml index d1a12df..509f87e 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -27,7 +27,9 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [ "CgTrash", "IoReturnUpBackSharp", "AiEyeFilled", - "AiEyeInvisibleFilled" + "AiEyeInvisibleFilled", + "OcHomeFillLg", + "AiSearchOutlined" ] } dotenv = { version = "0.15.0", optional = true } diesel = { version = "2.1.4", features = ["postgres", "r2d2", "time"], optional = true } diff --git a/src/app.rs b/src/app.rs index 85b00cc..45824e9 100644 --- a/src/app.rs +++ b/src/app.rs @@ -6,8 +6,7 @@ use leptos_meta::*; use leptos_router::*; use crate::pages::login::*; use crate::pages::signup::*; -use crate::components::sidebar::*; -use crate::components::dashboard::*; + #[component] pub fn App() -> impl IntoView { @@ -36,16 +35,27 @@ pub fn App() -> impl IntoView { } } +use crate::components::sidebar::*; +use crate::components::dashboard::*; +use crate::components::search::*; + /// Renders the home page of your application. #[component] fn HomePage() -> impl IntoView { let mut play_status = PlayStatus::default(); let play_status = create_rw_signal(play_status); + + let (dashboard_open, set_dashboard_open) = create_signal(true); view! {
- - + + } + > + +
diff --git a/src/components.rs b/src/components.rs index bffdc50..e843333 100644 --- a/src/components.rs +++ b/src/components.rs @@ -1,2 +1,3 @@ pub mod sidebar; -pub mod dashboard; \ No newline at end of file +pub mod dashboard; +pub mod search; \ No newline at end of file diff --git a/src/components/search.rs b/src/components/search.rs new file mode 100644 index 0000000..ed11f5b --- /dev/null +++ b/src/components/search.rs @@ -0,0 +1,11 @@ +use leptos::*; +use leptos::leptos_dom::*; + +#[component] +pub fn Search() -> impl IntoView { + view! { +
+

Searching...

+
+ } +} \ No newline at end of file diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs index 5f4ace8..9872b44 100644 --- a/src/components/sidebar.rs +++ b/src/components/sidebar.rs @@ -1,22 +1,37 @@ use leptos::*; +use leptos::leptos_dom::*; +use leptos_icons::AiIcon::*; +use leptos_icons::OcIcon::*; +use leptos_icons::*; #[component] -pub fn Sidebar() -> impl IntoView { +pub fn Sidebar(setter: WriteSignal) -> 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"); + }; + view! {
- +
+

LibreTunes

+
+ +

Dashboard

+
+
+ +

Search

+
+

LibreTunes

- -
- } -} -#[component] -pub fn Top() -> impl IntoView { - view! { -
-

Hello

+
} } diff --git a/src/pages/signup.rs b/src/pages/signup.rs index c2de8f8..503195e 100644 --- a/src/pages/signup.rs +++ b/src/pages/signup.rs @@ -1,6 +1,5 @@ use crate::auth::signup; use crate::models::User; -use leptos::ev::input; use leptos::leptos_dom::*; use leptos::*; use leptos_icons::AiIcon::*; diff --git a/style/dashboard.scss b/style/dashboard.scss index 7eb53c9..6d9946e 100644 --- a/style/dashboard.scss +++ b/style/dashboard.scss @@ -1,7 +1,7 @@ -@import 'theme.scss'; +@import "theme.scss"; .dashboard-container { - width: 73%; - background: green; - height: 100vh; -} \ No newline at end of file + width: calc(100% - 22rem); + background: green; + height: 100vh; +} diff --git a/style/main.scss b/style/main.scss index 557dd84..cdd8e9a 100644 --- a/style/main.scss +++ b/style/main.scss @@ -6,6 +6,7 @@ @import "sidebar.scss"; @import "dashboard.scss"; @import 'home.scss'; +@import 'search.scss'; body { font-family: sans-serif; diff --git a/style/search.scss b/style/search.scss new file mode 100644 index 0000000..07da063 --- /dev/null +++ b/style/search.scss @@ -0,0 +1,8 @@ +@import 'theme.scss'; + +.search-container { + width: calc(100% - 22rem); + background: green; + height: 100vh; + } + \ No newline at end of file diff --git a/style/sidebar.scss b/style/sidebar.scss index f1a7cd2..4051817 100644 --- a/style/sidebar.scss +++ b/style/sidebar.scss @@ -2,13 +2,40 @@ .sidebar-container { background-color: red; - width: 27%; + width: 22rem; height: calc(100% - 75px); } .sidebar-top-container { border-radius: 1rem; - background-color: yellow; - height: 20%; + background-color: darkblue; + height: 10rem; margin: 5px; + padding: 0.2rem 1rem 1rem 1rem; +} + +.sidebar-top-container .header { + font-size: 1.4rem; +} +.sidebar-top-container .buttons { + display: flex; + flex-direction: row; + font-size: 2rem; + align-items: center; + transition: all 0.5s; + cursor: pointer; + color: grey; +} +.sidebar-top-container .buttons:hover { + color: white; +} + +.sidebar-top-container .buttons:last-child { + margin-left: 0.02rem; +} + +.sidebar-top-container h1 { + font-size: 1.1rem; + margin-left: 0.8rem; + font-weight: 200; }