modified: Cargo.toml

modified:   src/components/sidebar.rs
	modified:   style/sidebar.scss

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 }

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<bool>, active: ReadSignal<bool>) -> impl Into
                     <h1>Search</h1>
                 </div>
             </div>
-            <div class="sidebar-bottom-container">
+            <Bottom />
-                <h1>LibreTunes</h1>
-            </div>
 
         </div>
     }
 }
+
+#[component]
+pub fn Bottom() -> impl IntoView {
+    view! {
+        <div class="sidebar-bottom-container">
+            <div class="heading">
+                <h1 class="header">Playlists</h1>
+                <button class="add-playlist">
+                    <div class="add-sign">
+                        <Icon icon=Icon::from(IoAddSharp) />
+                    </div>
+                    New Playlist
+                </button>
+            </div>
+        </div>
+    }
+}

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;
+    }
+  }
 }