move nav folder-paths into a new component (#66)

* move folder-paths into a new component

* move nav playlist title into new components

src/components/nav/Titles/Folder.vue

@@ -0,0 +1,127 @@
+<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="fname">
+        <div class="icon image"></div>
+        <div class="paths">
+          <div class="path" v-for="path in subPaths" :key="path.path">
+            <span class="text">{{ path.name }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { subPath } from "@/interfaces";
+
+defineProps<{
+  subPaths: subPath[];
+}>();
+</script>
+
+<style lang="scss">
+#folder-nav-title {
+  .folder {
+    display: flex;
+    gap: $small;
+
+    .playbtnrect {
+      height: 2.25rem;
+    }
+
+    .drop-btn {
+      width: 2.25rem;
+
+      .drop-icon {
+        height: 2.25rem;
+        width: 2.25rem;
+      }
+    }
+
+    .fname {
+      background-color: $gray4;
+      border-radius: $small;
+      height: 2.25rem;
+      display: flex;
+      align-items: center;
+      margin-left: $smaller;
+      overflow: auto;
+      padding-right: $smaller;
+
+      .icon {
+        height: 2rem;
+        aspect-ratio: 1;
+        background-image: url("../../../assets/icons/folder.fill.svg");
+        background-size: 1.5rem;
+        margin-left: $smaller;
+        background-position: 65% 50%;
+      }
+
+      .paths {
+        display: flex;
+        gap: $smaller;
+        overflow: auto;
+        height: 100%;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        .path {
+          white-space: nowrap;
+          display: flex;
+          align-items: center;
+          cursor: default;
+
+          .text {
+            padding: $smaller;
+            border-radius: $smaller;
+          }
+
+          &::before {
+            content: "";
+            height: $medium;
+            margin-right: $smaller;
+            border-right: solid 1px $white;
+            transform: rotate(20deg);
+          }
+
+          &:first-child {
+            &::before {
+              display: none;
+            }
+          }
+
+          &:last-child {
+            padding-right: $smaller;
+          }
+
+          &:hover {
+            .text {
+              background-color: $gray;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/nav/Titles/Playlists.vue

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