reserve entered paths on navigating back

- retain the list of entered folders on going up the directory tree. 😹

src/components/nav/NavBar.vue

@@ -43,15 +43,15 @@ function useSubRoutes() {
     (newRoute: string) => {
       switch (newRoute) {
         case Routes.folder:
-          console.log(newRoute);
-          subPaths.value = createSubPaths(route.params.path);
+          let oldpath = "";
+          [oldpath, subPaths.value] = createSubPaths(route.params.path, oldpath);
 
           watch(
             () => route.params.path,
             (newPath) => {
               if (newPath == undefined) return;
 
-              subPaths.value = createSubPaths(newPath);
+              [oldpath, subPaths.value] = createSubPaths(newPath, oldpath);
             }
           );
           break;

src/components/nav/Titles/Folder.vue

@@ -2,7 +2,6 @@
   <div id="folder-nav-title">
     <div
       class="folder"
-      
       v-motion
       :initial="{
         opacity: 0,
@@ -19,7 +18,12 @@
       <div class="fname">
         <div class="icon image"></div>
         <div class="paths">
-          <div class="path" v-for="path in subPaths" :key="path.path">
+          <div
+            class="path"
+            v-for="path in subPaths"
+            :key="path.path"
+            :class="{ current: path.active }"
+          >
             <span class="text">{{ path.name }}</span>
           </div>
         </div>
@@ -120,6 +124,10 @@ defineProps<{
             }
           }
         }
+
+        .current > .text {
+          background-color: $accent;
+        }
       }
     }
   }

src/composables/createSubPaths.ts

@@ -2,16 +2,53 @@ import { subPath } from "@/interfaces";
 
 /**
  * Breaks a path into sub-paths.
- * @param {string} paths to break into subpaths
- * @returns {subPath[]} an array of subpaths
+ * @param {string} newpath the new path to break into sub-paths.
+ * @param {string} oldpath the old path to compare with the new path.
  */
-export default function createSubPaths(paths: string | string[]): subPath[] {
-  const pathlist = (paths as string).split("/");
-  pathlist.shift();
+export default function createSubPaths(
+  newpath: string | string[],
+  oldpath: string | string[]
+): [string, subPath[]] {
+  if (oldpath === undefined) oldpath = "";
 
-  const subPaths = pathlist.map((path, index) => {
-    return { name: path, path: pathlist.slice(0, index + 1).join("/") };
-  });
+  newpath = newpath as string;
+  oldpath = oldpath as string;
 
-  return subPaths;
+  const newlist = newpath.split("/");
+  newlist.shift();
+
+  if (oldpath.includes(newpath)) {
+    const oldlist = oldpath.split("/");
+    oldlist.shift();
+
+    const current = newlist.slice(-1)[0];
+    return [oldpath, createSubs(oldlist, current)];
+  } else {
+    const current = newlist.slice(-1)[0];
+
+    return [newpath, createSubs(newlist, current)];
+  }
+
+  function createSubs(list: string[], current: string) {
+    const paths = list.map((path, index) => {
+      return {
+        active: false,
+        name: path,
+        path: newlist.slice(0, index + 1).join("/"),
+      };
+    });
+    paths.reverse();
+
+    for (let i = 0; i < paths.length; i++) {
+      if (paths[i].name === current) {
+        paths[i].active = true;
+        break;
+      }
+    }
+
+    return paths.reverse();
+  }
 }
+
+// function that takes 2 strings as parameters and returns a string
+// that is the concatenation of the two strings

src/interfaces.ts

@@ -89,6 +89,7 @@ interface fromSearch {
 interface subPath {
   name: string;
   path: string;
+  active: boolean;
 }
 
 export {