add options button to playlist view

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;