add child level context menu

- more typescript

src/components/Search/LoadMore.vue

@@ -6,18 +6,14 @@
   </div>
 </template>
 
-<script>
-export default {
-  setup(props, { emit }) {
-    function loadMore() {
-      emit("loadMore");
-    }
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: "loadMore"): void;
+}>();
 
-    return {
-      loadMore,
-    };
-  },
-};
+function loadMore() {
+  emit("loadMore");
+}
 </script>
 
 <style lang="scss">
@@ -42,4 +38,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/contextMenu.vue

@@ -2,7 +2,13 @@
   <!-- v-show="context.visible" -->
   <div
     class="context-menu rounded shadow-lg"
-    :class="{ 'context-menu-visible': context.visible }"
+    :class="[
+      { 'context-menu-visible': context.visible },
+      { 'context-normalizedX': context.normalizedX },
+      {
+        'context-normalizedY': context.normalizedY && context.hasManyChildren(),
+      },
+    ]"
     :style="{
       left: context.x + 'px',
       top: context.y + 'px',
@@ -17,31 +23,46 @@
     >
       <div class="icon image" :class="option.icon"></div>
       <div class="label ellip">{{ option.label }}</div>
+      <div class="more image" v-if="option.children"></div>
+      <div class="children rounded shadow-sm" v-if="option.children">
+        <div
+          class="context-item"
+          v-for="child in option.children"
+          :key="child"
+        >
+          <div class="label ellip" @click="child.action()">
+            {{ child.label }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import useContextStore from "@/stores/context.js";
+import useContextStore from "../stores/context";
 
 const context = useContextStore();
 </script>
 
 <style lang="scss">
+
+
 .context-menu {
   position: fixed;
   top: 0;
   left: 0;
-  width: 10rem;
+  width: 12rem;
   height: min-content;
+  z-index: 100000 !important;
+  transform: scale(0);
+
   padding: $small;
   background: $gray3;
-  z-index: 100000 !important;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  transform: scale(0);
   transform-origin: top left;
   font-size: 0.875rem;
 
@@ -55,6 +76,30 @@ const context = useContextStore();
     padding: 0 $small;
     border-radius: $small;
     color: rgb(255, 255, 255);
+    position: relative;
+
+    .more {
+      height: 1.5rem;
+      width: 1.5rem;
+      position: absolute;
+      right: 0;
+      background-image: url("../assets/icons/more.svg");
+    }
+
+    .children {
+      position: absolute;
+      right: -13rem;
+      width: 13rem;
+
+      padding: $small;
+      background: $gray3;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      transform: scale(0);
+      transform-origin: left;
+    }
 
     .icon {
       height: 1.25rem;
@@ -92,6 +137,11 @@ const context = useContextStore();
 
     &:hover {
       background: #234ece;
+
+      .children {
+        transform: scale(1);
+        transition: transform 0.2s ease-in-out;
+      }
     }
   }
 
@@ -110,4 +160,22 @@ const context = useContextStore();
   transform: scale(1);
   transition: transform 0.2s ease-in-out;
 }
+
+.context-normalizedX {
+  .more {
+    transform: rotate(180deg);
+  }
+
+  .context-item > .children {
+    left: -13rem;
+    transform-origin: center right;
+  }
+}
+
+.context-normalizedY {
+  .context-item > .children {
+    bottom: -0.5rem;
+    transform-origin: bottom right;
+  }
+}
 </style>

src/components/nav/NavBar.vue

@@ -1,26 +1,24 @@
 <template>
   <div class="topnav rounded">
     <div class="left">
-      <!-- <div class="btn">
+      <div class="btn">
         <PlayBtn />
-      </div> -->
+      </div>
       <div class="info">
-        <div class="title">Album</div>
+        <div class="title">beerbongs & bentleys</div>
       </div>
     </div>
-    <div class="center"></div>
+    <div class="center rounded"></div>
     <div class="right"></div>
   </div>
 </template>
 
 <script setup>
-import PlayBtn from '../shared/PlayBtn.vue';
-
+import PlayBtn from "../shared/PlayBtn.vue";
 </script>
 
 <style lang="scss">
 .topnav {
-  background-color: $gray3;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   padding: 0 $small;
@@ -28,7 +26,6 @@ import PlayBtn from '../shared/PlayBtn.vue';
 
   .left {
     display: flex;
-    // border: solid 1px $gray;
     align-items: center;
     gap: $small;
 
@@ -39,5 +36,15 @@ import PlayBtn from '../shared/PlayBtn.vue';
       }
     }
   }
+
+  .center {
+    display: grid;
+
+    .songcard {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 }
 </style>

src/components/shared/PlayBtn.vue

@@ -8,7 +8,7 @@
 .play-btn {
   width: 2rem;
   height: 2rem;
-  background-color: $red;
+  background-color: $accent;
   background-image: url("../../assets/icons/play.svg");
   background-size: 1.25rem;
   background-position: 60%;

src/components/shared/SongItem.vue

@@ -63,9 +63,9 @@
 <script setup lang="ts">
 import perks from "../../composables/perks.js";
 import state from "../../composables/state";
-import useContextStore from "../../stores/context.js";
+import useContextStore from "../../stores/context";
 import { ref } from "vue";
-import trackContext from "../../composables/track_context";
+import trackContext from "../../contexts/track_context";
 import { Track } from "../../interfaces.js";
 
 const contextStore = useContextStore();
@@ -108,8 +108,6 @@ const current = state.current;
 </script>
 
 <style lang="scss">
-// 
-
 .songlist-item {
   display: grid;
   align-items: center;

src/components/shared/TrackItem.vue

@@ -38,8 +38,8 @@
 import { ref } from "vue";
 import perks from "../../composables/perks";
 import playAudio from "../../composables/playAudio";
-import useContextStore from "@/stores/context.js";
-import trackContext from "../../composables/track_context";
+import useContextStore from "@/stores/context";
+import trackContext from "../../contexts/track_context";
 
 const contextStore = useContextStore();
 const context_on = ref(false);