diff --git a/Cargo.toml b/Cargo.toml index 199e742..599eaa1 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -30,7 +30,8 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [ "AiEyeInvisibleFilled", "OcHomeFillLg", "BiSearchRegular", - "CgProfile" + "CgProfile", + "IoAddSharp" ] } dotenv = { version = "0.15.0", optional = true } diesel = { version = "2.1.4", features = ["postgres", "r2d2", "time"], optional = true } diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs index 0e4611b..6532348 100644 --- a/src/components/sidebar.rs +++ b/src/components/sidebar.rs @@ -1,6 +1,7 @@ use leptos::leptos_dom::*; use leptos::*; use leptos_icons::BiIcon::*; +use leptos_icons::IoIcon::*; use leptos_icons::OcIcon::*; use leptos_icons::*; @@ -28,10 +29,25 @@ pub fn Sidebar(setter: WriteSignal, active: ReadSignal) -> impl Into

Search

- + } } + +#[component] +pub fn Bottom() -> impl IntoView { + view! { + + } +} diff --git a/style/sidebar.scss b/style/sidebar.scss index 563cec6..2eb8c72 100644 --- a/style/sidebar.scss +++ b/style/sidebar.scss @@ -50,4 +50,42 @@ 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; + } + } }