break down foldername into subpaths

src/components/LeftSidebar/Navigation.vue

@@ -5,12 +5,7 @@
       :key="menu.name"
       :to="{ name: menu.route_name, params: menu.params }"
     >
-      <div
-        class="nav-button"
-        id="home-button"
-        v-motion-slide-from-left-100
-
-      >
+      <div class="nav-button" id="home-button" v-motion-slide-from-left-100>
         <div class="in">
           <div class="nav-icon image" :id="`${menu.name}-icon`"></div>
           <span>{{ menu.name }}</span>
@@ -21,6 +16,8 @@
 </template>
 
 <script setup lang="ts">
+import { useRouter } from "vue-router";
+
 const menus = [
   {
     name: "home",
@@ -51,6 +48,7 @@ const menus = [
     route_name: "SettingsView",
   },
 ];
+
 </script>
 
 <style lang="scss">

src/components/nav/NavBar.vue

@@ -42,9 +42,12 @@
         >
           <div class="fname">
             <div class="icon image"></div>
-            <div class="ellip">
+            <div class="paths">
               <!-- {{ $route.params.path.split("/").splice(-1)[0] }} -->
-              {{ $route.params.path }}
+              <!-- {{ $route.params.path }} -->
+              <div class="path" v-for="path in subPaths" :key="path.path">
+                <span class="text">{{ path.name }}</span>
+              </div>
             </div>
           </div>
         </div>
@@ -65,22 +68,63 @@
 import NavButtons from "./NavButtons.vue";
 import Loader from "../shared/Loader.vue";
 import Search from "./Search.vue";
+import { useRoute } from "vue-router";
+import { onMounted, ref, watch } from "vue";
+import { Routes } from "@/composables/enums";
+import createSubPaths from "@/composables/createSubPaths";
+import { subPath } from "@/interfaces";
+
+const route = useRoute();
+
+const subPaths = ref<subPath[]>();
+
+function useSubRoutes() {
+  watch(
+    () => route.name,
+    (newRoute: string) => {
+      switch (newRoute) {
+        case Routes.folder:
+          console.log(newRoute);
+          subPaths.value = createSubPaths(route.params.path);
+
+          watch(
+            () => route.params.path,
+            (newPath) => {
+              if (newPath == undefined) return;
+
+              subPaths.value = createSubPaths(newPath);
+            }
+          );
+          break;
+
+        default:
+          break;
+      }
+    }
+  );
+}
+
+onMounted(() => {
+  useSubRoutes();
+});
 </script>
 
 <style lang="scss">
 .topnav {
   display: grid;
-  grid-template-columns: 1fr max-content max-content;
+  grid-template-columns: 1fr min-content max-content;
   padding-bottom: 1rem;
   margin: $small $small 0 $small;
   border-bottom: 1px solid $gray3;
   height: 3rem;
 
   .left {
-    display: flex;
-    align-items: center;
+    display: grid;
+    grid-template-columns: max-content 1fr;
 
     .info {
+      min-width: 15rem;
+
       .title {
         font-size: 1.5rem;
         font-weight: bold;
@@ -104,20 +148,68 @@ import Search from "./Search.vue";
         }
 
         .fname {
-          padding-left: 0.5rem;
           background-color: $gray4;
           border-radius: $small;
           height: 2.25rem;
           display: flex;
           align-items: center;
-          padding-right: $small;
-          gap: 0.25rem;
           margin-left: $smaller;
+          overflow: auto;
 
           .icon {
-            width: 1.5rem;
-            height: 1.5rem;
+            height: 2rem;
+            aspect-ratio: 1;
             background-image: url("../../assets/icons/folder.fill.svg");
+            background-size: 1.5rem;
+            background-position: 75% 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: $small;
+              }
+
+              &:hover {
+                .text {
+                  background-color: $gray;
+                }
+              }
+            }
           }
         }
       }

src/composables/createSubPaths.ts

@@ -0,0 +1,17 @@
+import { subPath } from "@/interfaces";
+
+/**
+ * Breaks a path into sub-paths.
+ * @param {string} paths to break into subpaths
+ * @returns {subPath[]} an array of subpaths
+ */
+export default function createSubPaths(paths: string | string[]): subPath[] {
+  const pathlist = (paths as string).split("/");
+  pathlist.shift();
+
+  const subPaths = pathlist.map((path, index) => {
+    return { name: path, path: pathlist.slice(0, index + 1).join("/") };
+  });
+
+  return subPaths;
+}

src/composables/enums.ts

@@ -24,3 +24,14 @@ export enum ContextSrc {
   AHeader = "AHeader",
   FHeader = "FHeader"
 }
+
+export enum Routes {
+  home = "Home",
+  folder = "FolderView",
+  playlists = "Playlists",
+  playlist = "PlaylistView",
+  albums = "AlbumsView",
+  album = "AlbumView",
+  artists = "ArtistsView",
+  settings = "SettingsView",
+}

src/interfaces.ts

@@ -84,6 +84,11 @@ interface fromSearch {
   query: string;
 }
 
+interface subPath {
+  name: string;
+  path: string;
+}
+
 export {
   Track,
   Folder,
@@ -96,4 +101,5 @@ export {
   fromAlbum,
   fromPlaylist,
   fromSearch,
+  subPath,
 };