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>