From bcb24c2a97d02f5c19700f9f20fe5fb6159bee0c Mon Sep 17 00:00:00 2001
From: dannyzou18 <dzou3814@gmail.com>
Date: Thu, 23 May 2024 00:02:13 -0400
Subject: [PATCH] added background overlay when adding anything

---
 src/components/sidebar.rs | 10 ++++++++++
 style/addAlbum.scss       |  1 +
 style/addArtist.scss      |  1 +
 style/home.scss           |  1 +
 style/sidebar.scss        | 13 +++++++++++++
 style/upload.scss         |  1 +
 6 files changed, 27 insertions(+)

diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs
index 31e2c93..5f77c10 100644
--- a/src/components/sidebar.rs
+++ b/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/>
diff --git a/style/addAlbum.scss b/style/addAlbum.scss
index b72bbf1..90edb09 100644
--- a/style/addAlbum.scss
+++ b/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;
diff --git a/style/addArtist.scss b/style/addArtist.scss
index 227d954..b3b1f9d 100644
--- a/style/addArtist.scss
+++ b/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;
diff --git a/style/home.scss b/style/home.scss
index 371032d..c0ff45e 100644
--- a/style/home.scss
+++ b/style/home.scss
@@ -6,6 +6,7 @@
   height: 100vh;
   display: flex;
   flex-direction: row;
+  overflow: hidden;
 }
 .home-component {
   background: #1c1c1c;
diff --git a/style/sidebar.scss b/style/sidebar.scss
index 733eed2..fb016b1 100644
--- a/style/sidebar.scss
+++ b/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;
     }
diff --git a/style/upload.scss b/style/upload.scss
index af84ef8..948162f 100644
--- a/style/upload.scss
+++ b/style/upload.scss
@@ -15,6 +15,7 @@
     display: flex;
     flex-direction: column;
     background-color: #1c1c1c;
+    z-index: 11;
     .close-button {
         position: absolute;
         top: 5px;