created component to add a playlist

src/components/sidebar.rs

@@ -34,17 +34,36 @@ pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl Into
 
 #[component]
 pub fn Bottom() -> impl IntoView {
+    let (create_playlist_open, set_create_playlist_open) = create_signal(false);
+
     view! {
         <div class="sidebar-bottom-container">
             <div class="heading">
                 <h1 class="header">Playlists</h1>
-                <button class="add-playlist">
+                <button on:click=move|_| set_create_playlist_open.update(|value|*value = true) class="add-playlist">
                     <div class="add-sign">
                         <Icon icon=icondata::IoAddSharp />
                     </div>
                     New Playlist
                 </button>
             </div>
+            <CreatePlayList opened=create_playlist_open closer=set_create_playlist_open/>
+        </div>
+    }
+}
+
+#[component]
+pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> impl IntoView {
+    view! {
+        <div class="create-playlist-popup-container" style={move || if opened() {"display:flex"} else {"display:none"}}>
+            <div class="close-button" on:click=move |_| closer.update(|value| *value = false)>
+                <Icon icon=icondata::IoCloseSharp />
+            </div>
+            <h1 class="header">Create Playlist</h1>    
+            <form class="create-playlist-form" action="POST">
+                <input class="name-input" type="text" placeholder="Playlist Name" />
+                <button class="create-button" type="submit">Create</button>
+            </form>
         </div>
     }
 }

src/pages/login.rs

@@ -73,9 +73,7 @@ pub fn Login() -> impl IntoView {
                         <i></i>
                         <Show
                             when=move || {show_password() == false}
-                            fallback=move || view!{ <button on:click=toggle_password class="login-password-visibility">
+                            fallback=move || view!{ <button on:click=toggle_password class="login-password-visibility"><Icon icon=icondata::AiEyeInvisibleFilled /></button> /> }
-                                                  <Icon icon=icondata::AiEyeInvisibleFilled />
-                                               </button> /> }
                         >
                             <button on:click=toggle_password class="login-password-visibility">
                                 <Icon icon=icondata::AiEyeFilled />

style/sidebar.scss

@@ -88,4 +88,70 @@
       background-color: #9e9e9e;
     }
   }
+  .create-playlist-popup-container {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    // background-color: #1c1c1c;
+    height: 12rem;
+    width: 20rem;
+    border-radius: 2px;
+    padding: 1rem;
+    padding-top: 0.1rem;
+    border: 1px solid grey;
+    position: fixed;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    .close-button {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      border-radius: 50%;
+      font-size: 1.6rem;
+      transition: all 0.3s;
+    }
+    .close-button:hover {
+      transform: scale(1.1);
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .close-button:active {
+      transform: scale(0.8);
+    }
+    .header {
+      font-size: 1.2rem;
+      font-weight: 200;
+      margin-bottom: 0.5rem;
+    }
+    .create-playlist-form {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      height: 100%;
+      .name-input {
+        background: transparent;
+        border: none;
+        border-bottom: 1px solid grey;
+        font-size: 1.1rem;
+        color: white;
+        margin-top: 2rem;
+      }
+      .name-input:focus {
+        outline: none;
+      }
+      .create-button {
+        position: absolute;
+        bottom: 0px;
+        width: 5rem;
+        padding: 0.4rem;
+        border-radius: 0.5rem;
+        cursor: pointer;
+      }
+    }
+  }
 }