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,13 +14,13 @@
     .header {
       font-size: 1.2rem;
     }
-    .upload-btn {
+    .upload-dropdown-container {
       position: absolute;
       top: 10px;
       right: 7px;
+      .upload-dropdown-btn {
         display: flex;
         flex-direction: row;
-      align-items: center;
         justify-content: center;
         font-size: 0.9rem;
         border-radius: 50px;
@@ -33,13 +33,20 @@
         .add-sign {
           font-size: 1.5rem;
           margin-top: auto;
-        margin-right: 5px;
-        color: white;
         }
       }
-    .upload-btn:hover {
+      .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;
+      }
+    }
+    
     .buttons {
       display: flex;
       flex-direction: row;