added background overlay when adding anything

src/components/sidebar.rs

@@ -21,6 +21,16 @@ pub fn Sidebar(upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add
     view! {
         <div class="sidebar-container">
             <div class="sidebar-top-container">
+                <Show
+                    when=move || {upload_open.get() || add_artist_open.get() || add_album_open.get()}
+                    fallback=move || view! {}
+                >
+                    <div class="upload-overlay" on:click=move |_| {
+                        upload_open.set(false);
+                        add_artist_open.set(false);
+                        add_album_open.set(false);
+                    }></div>
+                </Show>
                 <h2 class="header">LibreTunes</h2>
                 <div class="upload-dropdown-container">
                     <UploadDropdownBtn dropdown_open=dropdown_open/>

style/addAlbum.scss

@@ -15,6 +15,7 @@
     display: flex;
     flex-direction: column;
     background-color: #1c1c1c;
+    z-index: 11;
     .upload-header {
         font-size: .7rem;
         font-weight: 300;

style/addArtist.scss

@@ -15,6 +15,7 @@
     display: flex;
     flex-direction: column;
     background-color: #1c1c1c;
+    z-index: 11;
     .upload-header {
         font-size: .7rem;
         font-weight: 300;

style/home.scss

@@ -6,6 +6,7 @@
   height: 100vh;
   display: flex;
   flex-direction: row;
+  overflow: hidden;
 }
 .home-component {
   background: #1c1c1c;

style/sidebar.scss

@@ -11,6 +11,19 @@
     margin: 3px;
     padding: 0.1rem 1rem 1rem 1rem;
     position: relative;
+    .upload-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 10;
+    }
     .header {
       font-size: 1.2rem;
     }

style/upload.scss

@@ -15,6 +15,7 @@
     display: flex;
     flex-direction: column;
     background-color: #1c1c1c;
+    z-index: 11;
     .close-button {
         position: absolute;
         top: 5px;