add options button to playlist view

src/assets/icons/options.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 18C9.10457 18 10 17.1046 10 16C10 14.8954 9.10457 14 8 14C6.89543 14 6 14.8954 6 16C6 17.1046 6.89543 18 8 18Z" fill="white"/>
+<path d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z" fill="white"/>
+<path d="M24 18C25.1046 18 26 17.1046 26 16C26 14.8954 25.1046 14 24 14C22.8954 14 22 14.8954 22 16C22 17.1046 22.8954 18 24 18Z" fill="white"/>
+</svg>

src/components/PlaylistView/FeaturedArtists.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="f-artists">
-    <div class="artists" id="meeee">
+    <div class="artists" ref="artists_dom" v-on:mouseover="say">
       <div class="artist c1">
         <div class="blur"></div>
         <div class="s2"></div>
@@ -17,6 +17,8 @@
   </div>
 </template>
 <script>
+import { ref } from '@vue/reactivity';
+
 export default {
   setup() {
     const artists = [
@@ -37,8 +39,16 @@ export default {
       "Kendrick Lamar",
     ];
 
+    const artists_dom = ref(null)
+
+    const say = () => {
+      
+    }
+
     return {
       artists,
+      artists_dom,
+      say
     };
   },
 };
@@ -52,6 +62,7 @@ export default {
   background-color: #1f1e1d;
   padding: $small;
   border-radius: $small;
+  user-select: none;
 }
 
 .f-artists .heading {
@@ -88,7 +99,7 @@ export default {
   align-items: center;
   justify-content: center;
   transition: all 0.5s ease-in-out;
-  scroll-snap-type: x mandatory;
+  cursor: pointer;
 }
 
 .f-artists .artist:hover {

src/components/PlaylistView/Header.vue

@@ -14,6 +14,7 @@
         <hr />
         <div class="btns">
           <div class="play s-item"><p>Play Now</p></div>
+          <div class="options s-item image"></div>
         </div>
       </div>
       <!--  -->
@@ -107,6 +108,7 @@
 
 .p-header .info .btns {
   height: 2.5rem;
+  display: flex;
 }
 
 .p-header .info .btns .play {
@@ -117,12 +119,29 @@
   background-image: url(../../assets/icons/play.svg);
 }
 
+.p-header .info .btns .options {
+  width: 2.5rem;
+  height: 100%;
+  background-color: #0465a7;
+  border-radius: 50%;
+  background-image: url(../../assets/icons/options.svg);
+  background-size: 80%;
+  background-position: center;
+  border: none;
+  transition: all 0.5s ease;
+}
+
+.p-header .info .btns .options:hover {
+  transform: rotate(90deg);
+  transition: all 0.5s ease;
+  background-color: #2da8c7;
+}
+
 .p-header .info .albums {
   position: relative;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 0.5rem;
-  // border: solid;
   position: absolute;
   bottom: -0.5em;
   right: -1em;

src/views/FolderView.vue

@@ -48,7 +48,7 @@ export default {
 
 #scrollable {
   overflow-y: scroll;
-  height: calc(100% - 5rem);
+  height: 100%;
   padding-right: 1rem;
 }
 </style>