diff --git a/src/app.rs b/src/app.rs index e9dbbfd..946b4c2 100644 --- a/src/app.rs +++ b/src/app.rs @@ -8,6 +8,7 @@ use crate::pages::login::*; use crate::pages::signup::*; use crate::error_template::{AppError, ErrorTemplate}; + #[component] pub fn App() -> impl IntoView { // Provides context that manages stylesheets, titles, meta tags, etc. @@ -41,15 +42,32 @@ 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] 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); view! { - - +
+ + } + > + + + + + +
} } diff --git a/src/components.rs b/src/components.rs new file mode 100644 index 0000000..4d0c8a5 --- /dev/null +++ b/src/components.rs @@ -0,0 +1,4 @@ +pub mod sidebar; +pub mod dashboard; +pub mod search; +pub mod personal; \ No newline at end of file diff --git a/src/components/dashboard.rs b/src/components/dashboard.rs new file mode 100644 index 0000000..9881db7 --- /dev/null +++ b/src/components/dashboard.rs @@ -0,0 +1,10 @@ +use leptos::*; + +#[component] +pub fn Dashboard() -> impl IntoView { + view! { +
+

Dashboard

+
+ } +} \ No newline at end of file diff --git a/src/components/personal.rs b/src/components/personal.rs new file mode 100644 index 0000000..889a780 --- /dev/null +++ b/src/components/personal.rs @@ -0,0 +1,42 @@ +use leptos::leptos_dom::*; +use leptos::*; +use leptos_icons::*; + +#[component] +pub fn Personal() -> impl IntoView { + view! { +
+ +
+ } +} + +#[component] +pub fn Profile() -> impl IntoView { + let (dropdown_open, set_dropdown_open) = create_signal(false); + + let open_dropdown = move |_| { + set_dropdown_open.update(|value| *value = !*value); + log!("opened dropdown"); + }; + view! { +
+
+ +
+
+ +
+
+ } +} +#[component] +pub fn DropDownNotLoggedIn() -> impl IntoView { + view! { +
+

Not Logged in!

+ + +
+ } +} diff --git a/src/components/search.rs b/src/components/search.rs new file mode 100644 index 0000000..ceb986b --- /dev/null +++ b/src/components/search.rs @@ -0,0 +1,10 @@ +use leptos::*; + +#[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 new file mode 100644 index 0000000..805fa4e --- /dev/null +++ b/src/components/sidebar.rs @@ -0,0 +1,50 @@ +use leptos::leptos_dom::*; +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"); + }; + + view! { +
+
+

LibreTunes

+
+ +

Dashboard

+
+
+ +

Search

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

Playlists

+ +
+
+ } +} diff --git a/src/lib.rs b/src/lib.rs index 74b1c08..89cd04e 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -8,6 +8,7 @@ pub mod queue; pub mod song; pub mod models; pub mod pages; +pub mod components; pub mod users; pub mod search; pub mod fileserv; diff --git a/style/dashboard.scss b/style/dashboard.scss new file mode 100644 index 0000000..e0df7d0 --- /dev/null +++ b/style/dashboard.scss @@ -0,0 +1,10 @@ +@import "theme.scss"; + +.dashboard-container { + width: calc(100% - 22rem - 16rem); + .dashboard-header { + font-size: 1.2rem; + font-weight: 300; + border-bottom: 2px solid white; + } +} diff --git a/style/home.scss b/style/home.scss new file mode 100644 index 0000000..371032d --- /dev/null +++ b/style/home.scss @@ -0,0 +1,16 @@ +@import "theme.scss"; + +.home-container { + margin-top: 0; + width: 100%; + height: 100vh; + display: flex; + flex-direction: row; +} +.home-component { + background: #1c1c1c; + height: 100vh; + margin: 2px; + padding: 0.2rem 1.5rem 1.5rem 1rem; + border-radius: 0.5rem; +} diff --git a/style/main.scss b/style/main.scss index 6706ef1..7793e25 100644 --- a/style/main.scss +++ b/style/main.scss @@ -1,13 +1,18 @@ -@import 'playbar.scss'; -@import 'theme.scss'; -@import 'queue.scss'; -@import 'login.scss'; -@import 'signup.scss'; +@import "playbar.scss"; +@import "theme.scss"; +@import "queue.scss"; +@import "login.scss"; +@import "signup.scss"; +@import "sidebar.scss"; +@import "dashboard.scss"; +@import 'home.scss'; +@import 'search.scss'; +@import 'personal.scss'; body { - font-family: sans-serif; - background-color: $background-color; - color: $text-controls-color; - margin: 0; - padding: 0; + font-family: sans-serif; + background-color: $background-color; + color: $text-controls-color; + margin: 0; + padding: 0; } diff --git a/style/personal.scss b/style/personal.scss new file mode 100644 index 0000000..e03e05e --- /dev/null +++ b/style/personal.scss @@ -0,0 +1,74 @@ +@import "theme.scss"; + +.personal-container { + width: 16rem; + background: #1c1c1c; + height: 100vh; + margin: 2px; + border-radius: 0.5rem; + + .profile-container { + display: flex; + border-radius: 0.4rem; + margin: 0.2rem; + min-height: 6rem; + border: 2px solid rgba(89, 89, 89, 0.199); + padding: 0.5rem; + + .profile-icon { + display: inline-flex; + padding: 0.2rem; + cursor: pointer; + font-size: 2rem; + border-radius: 50%; + transition: all 0.3s; + height: max-content; + margin-left: auto; + } + + .profile-icon:hover { + transform: scale(1.1); + background-color: rgba(255, 255, 255, 0.1); + } + + .profile-icon:active { + transform: scale(0.8); + } + .dropdown-container { + position: absolute; + top: 3.8rem; + right: 0.8rem; + background: #1c1c1c; + border-radius: 0.5rem; + width: 10rem; + z-index: 1; + background-color: red; + border: 1px solid grey; + + .dropdown-not-logged { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + justify-content: center; + h1 { + font-size: 1.2rem; + } + .auth-button { + } + } + } + .dropdown-container:before { + content: ""; + position: absolute; + top: -0.4rem; + right: 0.92rem; + width: 10px; + height: 10px; + transform: rotate(45deg); + background-color: red; + border-left: 1px solid grey; + border-top: 1px solid grey; + } + } +} diff --git a/style/search.scss b/style/search.scss new file mode 100644 index 0000000..9e43f4b --- /dev/null +++ b/style/search.scss @@ -0,0 +1,6 @@ +@import "theme.scss"; + +.search-container { + width: calc(100% - 22rem - 16rem); + +} diff --git a/style/sidebar.scss b/style/sidebar.scss new file mode 100644 index 0000000..2eb8c72 --- /dev/null +++ b/style/sidebar.scss @@ -0,0 +1,91 @@ +@import "theme.scss"; + +.sidebar-container { + background-color: transparent; + width: 22rem; + height: calc(100% - 75px); +} + +.sidebar-top-container { + border-radius: 1rem; + background-color: #1c1c1c; + height: 9rem; + margin: 3px; + padding: 0.1rem 1rem 1rem 1rem; +} + +.sidebar-top-container .header { + font-size: 1.2rem; +} +.sidebar-top-container .buttons { + display: flex; + flex-direction: row; + font-size: 1.8rem; + 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; + margin-top: 0.5rem; +} + +.sidebar-top-container h1 { + font-size: 0.95rem; + margin-left: 0.9rem; + font-weight: 400; + font-style: $standard-font; + letter-spacing: 0.5px; +} + +.sidebar-bottom-container { + border-radius: 1rem; + background-color: #1c1c1c; + margin: 3px; + margin-top: 6px; + padding: 0.2rem 1rem 1rem 1rem; + height: calc(100% - 9rem); + + .heading { + display: flex; + flex-direction: row; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + .header { + font-size: 1.2rem; + font-weight: 200; + } + + .add-playlist { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + font-size: 0.9rem; + border-radius: 50px; + border: none; + height: 2.2rem; + padding-right: 2rem; + padding-left: 2rem; + cursor: pointer; + transition: background-color 0.3s ease; + .add-sign { + font-size: 1.5rem; + margin-top: auto; + margin-right: 5px; + color: white; + } + } + .add-playlist:hover { + background-color: #9e9e9e; + } + } +} diff --git a/style/theme.scss b/style/theme.scss index 2d80285..a7ebc14 100644 --- a/style/theme.scss +++ b/style/theme.scss @@ -1,3 +1,7 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); + +$standard-font: 'Open Sans', sans-serif; + $background-color: #030303; $accent-color: #4032a8; $text-controls-color: #e0e0e0;