diff --git a/Cargo.lock b/Cargo.lock index 645a1e7..198b1f2 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1310,6 +1310,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "f41f2deec9249d16ef6b1a8442fbe16013f67053797052aa0b7d2f5ebd0f0098" dependencies = [ "icondata_ai", + "icondata_bi", "icondata_bs", "icondata_cg", "icondata_core", @@ -1327,6 +1328,15 @@ dependencies = [ "icondata_core", ] +[[package]] +name = "icondata_bi" +version = "0.0.8" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "c0953768d0b9cdd2da0b85b5ef44a0b43078d59411282b8da8fe6c13b123e01f" +dependencies = [ + "icondata_core", +] + [[package]] name = "icondata_bs" version = "0.0.8" diff --git a/Cargo.toml b/Cargo.toml index 509f87e..199e742 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -29,7 +29,8 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [ "AiEyeFilled", "AiEyeInvisibleFilled", "OcHomeFillLg", - "AiSearchOutlined" + "BiSearchRegular", + "CgProfile" ] } 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 45824e9..f22a3c1 100644 --- a/src/app.rs +++ b/src/app.rs @@ -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! {
- + } > +
diff --git a/src/components.rs b/src/components.rs index e843333..4d0c8a5 100644 --- a/src/components.rs +++ b/src/components.rs @@ -1,3 +1,4 @@ pub mod sidebar; pub mod dashboard; -pub mod search; \ No newline at end of file +pub mod search; +pub mod personal; \ No newline at end of file diff --git a/src/components/dashboard.rs b/src/components/dashboard.rs index a6b871d..c6cc16f 100644 --- a/src/components/dashboard.rs +++ b/src/components/dashboard.rs @@ -3,7 +3,7 @@ use leptos::*; #[component] pub fn Dashboard() -> impl IntoView { view! { -
+

Dashboard

} diff --git a/src/components/personal.rs b/src/components/personal.rs new file mode 100644 index 0000000..fdca503 --- /dev/null +++ b/src/components/personal.rs @@ -0,0 +1,25 @@ +use leptos::leptos_dom::*; +use leptos::*; +use leptos_icons::*; +use leptos_icons::CgIcon::*; + +#[component] +pub fn Personal() -> impl IntoView { + view! { +
+ +
+ } +} + +#[component] +pub fn Profile() -> impl IntoView { + view! { +
+
+ +
+ +
+ } +} diff --git a/src/components/search.rs b/src/components/search.rs index ed11f5b..706670b 100644 --- a/src/components/search.rs +++ b/src/components/search.rs @@ -4,7 +4,7 @@ use leptos::leptos_dom::*; #[component] pub fn Search() -> impl IntoView { view! { -
+

Searching...

} diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs index 9872b44..0e4611b 100644 --- a/src/components/sidebar.rs +++ b/src/components/sidebar.rs @@ -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) -> impl IntoView { +pub fn Sidebar(setter: WriteSignal, active: ReadSignal) -> impl IntoView { let open_dashboard = move |_| { setter.update(|value| *value = true); log!("open dashboard"); @@ -19,16 +19,16 @@ pub fn Sidebar(setter: WriteSignal) -> impl IntoView {

LibreTunes

-
+

Dashboard

-
- +
+

Search

-
+

LibreTunes

diff --git a/style/dashboard.scss b/style/dashboard.scss index 6d9946e..6ecba86 100644 --- a/style/dashboard.scss +++ b/style/dashboard.scss @@ -1,7 +1,5 @@ @import "theme.scss"; .dashboard-container { - width: calc(100% - 22rem); - background: green; - height: 100vh; + width: calc(100% - 22rem - 16rem); } diff --git a/style/home.scss b/style/home.scss index 76536f0..7a33033 100644 --- a/style/home.scss +++ b/style/home.scss @@ -7,3 +7,10 @@ display: flex; flex-direction: row; } +.home-component { + background: #1c1c1c; + height: 100vh; + margin: 2px; + padding: 1rem 1.5rem 1.5rem 1.5rem; + border-radius: 0.5rem; +} \ No newline at end of file diff --git a/style/main.scss b/style/main.scss index cdd8e9a..7793e25 100644 --- a/style/main.scss +++ b/style/main.scss @@ -7,6 +7,7 @@ @import "dashboard.scss"; @import 'home.scss'; @import 'search.scss'; +@import 'personal.scss'; body { font-family: sans-serif; diff --git a/style/personal.scss b/style/personal.scss new file mode 100644 index 0000000..37692e7 --- /dev/null +++ b/style/personal.scss @@ -0,0 +1,38 @@ +@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.3rem; + 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); + } + } +} diff --git a/style/search.scss b/style/search.scss index 07da063..9e43f4b 100644 --- a/style/search.scss +++ b/style/search.scss @@ -1,8 +1,6 @@ -@import 'theme.scss'; +@import "theme.scss"; .search-container { - width: calc(100% - 22rem); - background: green; - height: 100vh; - } - \ No newline at end of file + width: calc(100% - 22rem - 16rem); + +} diff --git a/style/sidebar.scss b/style/sidebar.scss index 4051817..563cec6 100644 --- a/style/sidebar.scss +++ b/style/sidebar.scss @@ -1,26 +1,26 @@ @import "theme.scss"; .sidebar-container { - background-color: red; + background-color: transparent; width: 22rem; height: calc(100% - 75px); } .sidebar-top-container { border-radius: 1rem; - background-color: darkblue; - height: 10rem; - margin: 5px; - padding: 0.2rem 1rem 1rem 1rem; + background-color: #1c1c1c; + height: 9rem; + margin: 3px; + padding: 0.1rem 1rem 1rem 1rem; } .sidebar-top-container .header { - font-size: 1.4rem; + font-size: 1.2rem; } .sidebar-top-container .buttons { display: flex; flex-direction: row; - font-size: 2rem; + font-size: 1.8rem; align-items: center; transition: all 0.5s; cursor: pointer; @@ -32,10 +32,22 @@ .sidebar-top-container .buttons:last-child { margin-left: 0.02rem; + margin-top: 0.5rem; } .sidebar-top-container h1 { - font-size: 1.1rem; - margin-left: 0.8rem; - font-weight: 200; + 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); } diff --git a/style/theme.scss b/style/theme.scss index 2d80285..ed21c25 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,400,500,700,800;1,300,400,500,600,800&display=swap'); + +$standard-font: 'Open Sans', sans-serif; + $background-color: #030303; $accent-color: #4032a8; $text-controls-color: #e0e0e0;