highlight current folder in pathlist in nav

src/components/nav/NavBar.vue

@@ -6,6 +6,7 @@
       </div>
 
       <div class="info">
+        <Album v-show="$route.name == Routes.album" />
         <Playlists v-show="$route.name == Routes.playlists" />
         <Folder v-show="$route.name == Routes.folder" :subPaths="subPaths" />
       </div>
@@ -32,6 +33,7 @@ import createSubPaths from "@/composables/createSubPaths";
 import { subPath } from "@/interfaces";
 import Folder from "./Titles/Folder.vue";
 import Playlists from "./Titles/Playlists.vue";
+import Album from "./Titles/Album.vue";
 
 const route = useRoute();
 
@@ -44,7 +46,10 @@ function useSubRoutes() {
       switch (newRoute) {
         case Routes.folder:
           let oldpath = "";
-          [oldpath, subPaths.value] = createSubPaths(route.params.path, oldpath);
+          [oldpath, subPaths.value] = createSubPaths(
+            route.params.path,
+            oldpath
+          );
 
           watch(
             () => route.params.path,
@@ -87,6 +92,8 @@ onMounted(() => {
       .title {
         font-size: 1.5rem;
         font-weight: bold;
+        margin-top: $smaller;
+        display: flex;
       }
     }
   }

src/components/nav/Titles/Album.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="title albumnavtitle" v-motion-slide-from-left-100>
+    <PlayBtn />
+    <div class="ellip">
+      {{ store.info.title }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useAlbumStore from "@/stores/album";
+import PlayBtn from "@/components/shared/PlayBtn.vue";
+
+const store = useAlbumStore();
+</script>
+
+<style lang="scss">
+.albumnavtitle {
+  padding-left: 3rem;
+
+  .play-btn {
+    position: absolute;
+    left: $smaller;
+    top: -$smaller;
+    height: 2.25rem;
+    aspect-ratio: 1;
+  }
+}
+</style>

src/components/nav/Titles/Folder.vue

@@ -1,20 +1,6 @@
 <template>
   <div id="folder-nav-title">
-    <div
-      class="folder"
-      v-motion
-      :initial="{
-        opacity: 0,
-        x: -20,
-      }"
-      :visible="{
-        opacity: 1,
-        x: 0,
-        transition: {
-          delay: 100,
-        },
-      }"
-    >
+    <div class="folder" v-motion-slide-from-left-100>
       <div class="fname">
         <div class="icon image"></div>
         <div class="paths">
@@ -22,7 +8,11 @@
             class="path"
             v-for="path in subPaths"
             :key="path.path"
-            :class="{ current: path.active }"
+            :class="{ inthisfolder: path.active }"
+            v-motion-slide-from-left-100
+            @click="
+              $router.push({ name: 'FolderView', params: { path: path.path } })
+            "
           >
             <span class="text">{{ path.name }}</span>
           </div>
@@ -33,11 +23,17 @@
 </template>
 
 <script setup lang="ts">
+import { focusElem } from "@/composables/perks";
 import { subPath } from "@/interfaces";
+import { onUpdated } from "vue";
 
 defineProps<{
   subPaths: subPath[];
 }>();
+
+onUpdated(() => {
+  focusElem("inthisfolder");
+});
 </script>
 
 <style lang="scss">
@@ -68,6 +64,7 @@ defineProps<{
       margin-left: $smaller;
       overflow: auto;
       padding-right: $smaller;
+      color: rgba(255, 255, 255, 0.678);
 
       .icon {
         height: 2rem;
@@ -125,8 +122,12 @@ defineProps<{
           }
         }
 
-        .current > .text {
-          background-color: $accent;
+        .inthisfolder > .text {
+          color: #fff;
+          font-weight: bold;
+          background-color: $gray;
+
+          transition: all 0.5s;
         }
       }
     }

src/components/nav/Titles/Playlists.vue

@@ -1,19 +1,7 @@
 <template>
   <div
     class="title"
-    v-show="$route.name == 'Playlists'"
-    v-motion
-    :initial="{
-      opacity: 0,
-      x: -20,
-    }"
-    :visible="{
-      opacity: 1,
-      x: 0,
-      transition: {
-        delay: 100,
-      },
-    }"
+    v-motion-slide-from-left-100
   >
     Playlists
   </div>

src/components/shared/PlayBtn.vue

@@ -9,17 +9,17 @@ function playThis(e: Event) {
 </script>
 <style lang="scss">
 .play-btn {
-  width: 2.5rem;
-  height: 2.5rem;
+  height: 2.25rem;
   background-color: $gray3;
   background-image: url("../../assets/icons/play.svg");
   background-size: 1.75rem;
+  background-repeat: no-repeat;
   background-position: 50% 50%;
   transition: all 0.25s ease-in-out;
+  aspect-ratio: 1;
 
   &:hover {
     background-color: $accent;
-    transform: scale(1.1);
   }
 }
 </style>

src/composables/perks.ts

@@ -12,16 +12,19 @@ const putCommas = (artists: string[]) => {
   return result;
 };
 
-function focusCurrent() {
-  const elem = document.getElementsByClassName("currentInQueue")[0];
+function focusElem(className: string, delay?: number) {
+  const dom = document.getElementsByClassName(className)[0];
+  if (!delay) delay = 300;
 
-  if (elem) {
-    elem.scrollIntoView({
-      behavior: "smooth",
-      block: "center",
-      inline: "center",
-    });
-  }
+  setTimeout(() => {
+    if (dom) {
+      dom.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "center",
+      });
+    }
+  }, delay);
 }
 
 function getElem(id: string, type: string) {
@@ -75,4 +78,4 @@ function formatSeconds(seconds: number, long?: boolean) {
   }
 }
 
-export { putCommas, focusCurrent, formatSeconds, getElem };
+export { putCommas, focusElem, formatSeconds, getElem };

src/stores/tabs.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { focusCurrent } from "../composables/perks";
+import { focusElem } from "../composables/perks";
 
 const tablist = {
   home: "home",
@@ -16,7 +16,7 @@ export default defineStore("tabs", {
     changeTab(tab: string) {
       if (tab === this.tabs.queue) {
         setTimeout(() => {
-          focusCurrent();
+          focusElem("currentInQueue");
         }, 500);
       }
       this.current = tab;

src/transitions.ts

@@ -4,7 +4,7 @@ export default {
       initial: {
         opacity: 0,
         x: 0,
-        y: 20
+        y: 20,
       },
       enter: {
         opacity: 1,
@@ -21,7 +21,7 @@ export default {
         opacity: 0,
         x: -20,
       },
-      enter: {
+      visible: {
         opacity: 1,
         x: 0,
         transition: {
@@ -55,16 +55,5 @@ export default {
         },
       },
     },
-    scale: {
-      initial: {
-        scale: 0.8,
-      },
-      enter: {
-        scale: 1,
-        transition: {
-          duration: 200,
-        },
-      },
-    },
   },
 };