created dropdown component

src/components.rs

@@ -3,3 +3,4 @@ pub mod dashboard;
 pub mod search;
 pub mod personal;
 pub mod upload;
+pub mod upload_dropdown;

src/components/sidebar.rs

@@ -1,13 +1,15 @@
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
-use crate::components::upload::*;
+use crate::components::upload_dropdown::*;
 
 #[component]
 pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView {
     use leptos_router::use_location;
     let location = use_location();
 
+    let dropdown_open = create_rw_signal(false);
+
     let on_dashboard = Signal::derive(
         move || location.pathname.get().starts_with("/dashboard") || location.pathname.get() == "/",
     );
@@ -20,7 +22,15 @@ pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView {
         <div class="sidebar-container">
             <div class="sidebar-top-container">
                 <h2 class="header">LibreTunes</h2>
-                <UploadBtn dialog_open=upload_open />
+                <div class="upload-dropdown-container">
+                    <UploadDropdownBtn dropdown_open=dropdown_open/>
+                    <Show
+                        when= move || dropdown_open()
+                        fallback=move || view! {}
+                    >
+                        <UploadDropdown/>
+                    </Show>
+                </div>
                 <a class="buttons" href="/dashboard" style={move || if on_dashboard() {"color: #e1e3e1"} else {""}} >
                     <Icon icon=icondata::OcHomeFillLg />
                     <h1>Dashboard</h1>

src/components/upload_dropdown.rs

@@ -0,0 +1,26 @@
+use leptos::*;
+use leptos_icons::*;
+use leptos::leptos_dom::*;
+
+#[component]
+pub fn UploadDropdownBtn(dropdown_open: RwSignal<bool>) -> impl IntoView {
+    let open_dropdown = move |_| {
+        dropdown_open.set(!dropdown_open.get());
+    };
+    view! {
+        <button class={move || if dropdown_open() {"upload-dropdown-btn upload-dropdown-btn-active"} else {"upload-dropdown-btn"}} on:click=open_dropdown>
+			<div class="add-sign">
+				<Icon icon=icondata::IoAddSharp />
+			</div>
+		</button>
+    }
+}
+
+#[component]
+pub fn UploadDropdown() -> impl IntoView {
+    view! {
+        <div class="upload-dropdown">
+            hello
+        </div>
+    }
+}

style/sidebar.scss

@@ -14,32 +14,39 @@
     .header {
       font-size: 1.2rem;
     }
-    .upload-btn {
+    .upload-dropdown-container {
       position: absolute;
       top: 10px;
       right: 7px;
-      display: flex;
+      .upload-dropdown-btn {
-      flex-direction: row;
+        display: flex;
-      align-items: center;
+        flex-direction: row;
-      justify-content: center;
+        justify-content: center;
-      font-size: 0.9rem;
+        font-size: 0.9rem;
-      border-radius: 50px;
+        border-radius: 50px;
-      border: none;
+        border: none;
-      height: 2.2rem;
+        height: 2.2rem;
-      padding-right: 1rem;
+        padding-right: 1rem;
-      padding-left: 1rem;
+        padding-left: 1rem;
-      cursor: pointer;
+        cursor: pointer;
-      transition: background-color 0.3s ease;
+        transition: background-color 0.3s ease;
-      .add-sign {
+        .add-sign {
-        font-size: 1.5rem;
+          font-size: 1.5rem;
-        margin-top: auto;
+          margin-top: auto;
-        margin-right: 5px;
+        }
-        color: white;
+      }
+      .upload-dropdown-btn:hover {
+        background-color: #9e9e9e;
+      }
+      .upload-dropdown-btn-active {
+        border-radius: 12.5px 12.5px 0 0;
+      }
+      .upload-dropdown {
+        background-color: #f0ecec;
+        color: black;
       }
     }
-    .upload-btn:hover {
+    
-      background-color: #9e9e9e;
-    }
     .buttons {
       display: flex;
       flex-direction: row;