add bottom bar

src/components/RightSideBar/NowPlaying.vue

@@ -101,153 +101,7 @@ export default {
   display: grid;
   grid-template-rows: 3fr 1fr;
 
-  .progress {
-    display: flex;
-    align-items: center;
-    height: 1.5rem;
-    position: relative;
-
-    .duration {
-      position: absolute;
-      right: 0;
-      top: -1rem;
-      font-size: small;
-    }
-
-    input {
-      -webkit-appearance: none;
-      width: 100%;
-      border: none;
-      outline: none;
-      background: transparent;
-    }
-
-    input:focus {
-      outline: none;
-    }
-
-    input::-webkit-slider-runnable-track {
-      width: 100%;
-      height: 0.25rem;
-      cursor: pointer;
-      background: #1488cc;
-      background: linear-gradient(
-        to right,
-        #1488cc,
-        #2b32b2
-      );
-    }
-
-    input::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      height: 1rem;
-      width: 1rem;
-      border-radius: 50%;
-      background: #ffffff;
-      cursor: pointer;
-      margin-top: -0.35rem;
-    }
-
-    input:focus::-webkit-slider-runnable-track,
-    input::-moz-range-track {
-      background: #367ebd;
-    }
-
-    input::-moz-range-thumb {
-      height: 1rem;
-      width: 1rem;
-      border-radius: 50%;
-      background: #ffffff;
-      cursor: pointer;
-      margin-top: -0.35rem;
-    }
-  }
-
-  .controls {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-
-    .nav {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      width: 100%;
-
-      & * {
-        height: 3rem;
-        width: 3rem;
-        background-size: 50%;
-        cursor: pointer;
-        border-radius: 0.5rem;
-      }
-
-      #previous {
-        background-image: url(../../assets/icons/previous.svg);
-      }
-
-      .play-pause {
-        background-image: url(../../assets/icons/play.svg);
-      }
-
-      .isPlaying {
-        background-image: url(../../assets/icons/pause.svg);
-      }
-
-      #next {
-        background-image: url(../../assets/icons/next.svg);
-      }
-    }
-
-    .shuffle {
-      width: 100%;
-      display: flex;
-      align-items: center;
-
-      & * {
-        height: 2rem;
-        width: 2rem;
-        background-size: 70%;
-        cursor: pointer;
-        border-radius: 0.5rem;
-      }
-
-      & :first-child {
-        background-image: url(../../assets/icons/repeat.svg);
-      }
-
-      & :last-child {
-        background-image: url(../../assets/icons/shuffle.svg);
-      }
-    }
-
-    .fav {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-
-      & * {
-        height: 2rem;
-        width: 2rem;
-        background-size: 70%;
-        border-radius: 0.5rem;
-        cursor: pointer;
-      }
-
-      & :first-child {
-        background-image: url(../../assets/icons/plus.svg);
-      }
-
-      & :last-child {
-        background-image: url(../../assets/icons/heart.svg);
-      }
-    }
-
-    .fav *:hover,
-    .shuffle *:hover,
-    .nav *:hover {
-      background-color: rgb(5, 80, 150);
-    }
-  }
+  
 
   .art-tags {
     display: flex;

src/components/RightSideBar/Recommendation.vue

@@ -22,10 +22,6 @@ export default {
         title: "Mockingbird",
         artist: "Eminem",
       },
-      {
-        title: "Slim shady",
-        artist: "Eminem",
-      },
     ];
 
     const r_albums = ["Crybaby", "Everybody's Everything", "Castles II"];