use computed properties to render correct nav title

src/components/AlbumView/Header.vue

@@ -53,6 +53,8 @@ const imguri = paths.images.thumb;
 const nav = useNavStore();
 
 useVisibility(albumheaderthing, nav.toggleShowPlay);
+
+
 </script>
 
 <style lang="scss">

src/components/PlaylistView/Header.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="p-header image"
+    ref="playlistheader"
     :style="[
       {
         backgroundImage: `url(${imguri + props.info.image})`,
@@ -47,10 +48,17 @@ import pContext from "../../contexts/playlist";
 import useContextStore from "../../stores/context";
 import { paths } from "../../config";
 import usePStore from "@/stores/p.ptracks";
+import useVisibility from "@/composables/useVisibility";
+import { ref } from "vue";
+import useNavStore from "@/stores/nav";
 
 const imguri = paths.images.playlist;
 const context = useContextStore();
 const modal = useModalStore();
+const nav = useNavStore();
+const playlistheader = ref(null);
+
+useVisibility(playlistheader, nav.toggleShowPlay);
 
 const props = defineProps<{
   info: Playlist;

src/components/nav/NavBar.vue

@@ -6,7 +6,7 @@
       </div>
 
       <div class="info">
-        <Album v-show="$route.name == Routes.album && !nav.showPlay" />
+        <APTitle v-show="showAPTitle" />
         <Playlists v-show="$route.name == Routes.playlists" />
         <Folder v-show="$route.name == Routes.folder" :subPaths="subPaths" />
       </div>
@@ -27,54 +27,59 @@ 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 { ref, watch } from "vue";
 import { Routes } from "@/composables/enums";
 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";
+import APTitle from "./Titles/APTitle.vue";
 import useNavStore from "@/stores/nav";
 
+import { computed } from "@vue/reactivity";
+
 const route = useRoute();
 const nav = useNavStore();
 
 const subPaths = ref<subPath[]>([]);
 
-function useSubRoutes() {
+const showAPTitle = computed(() => {
-  watch(
+  return (
-    () => route.name,
+    (route.name == Routes.album || route.name == Routes.playlist) &&
-    (newRoute: string) => {
+    !nav.h_visible
-      switch (newRoute) {
-        case Routes.folder:
-          let oldpath = "";
-          [oldpath, subPaths.value] = createSubPaths(
-            route.params.path,
-            oldpath
-          );
-
-          watch(
-            () => route.params.path,
-            (newPath) => {
-              if (newPath == undefined) return;
-
-              [oldpath, subPaths.value] = createSubPaths(newPath, oldpath);
-            }
-          );
-          break;
-
-        default:
-          break;
-      }
-    }
   );
-}
-
-onMounted(() => {
-  useSubRoutes();
 });
+
+watch(
+  () => route.name,
+  (newRoute: string) => {
+    switch (newRoute) {
+      case Routes.folder:
+        let oldpath = "";
+        [oldpath, subPaths.value] = createSubPaths(
+          route.params.path as string,
+          oldpath
+        );
+
+        watch(
+          () => route.params.path,
+          (newPath) => {
+            newPath = newPath as string;
+            if (newPath == undefined) return;
+
+            [oldpath, subPaths.value] = createSubPaths(newPath, oldpath);
+          }
+        );
+        break;
+      default:
+        break;
+    }
+  }
+);
 </script>
 
+<!-- !!use nav store to sync the title component!! -->
+
 <style lang="scss">
 .topnav {
   display: grid;

src/components/nav/Titles/APTitle.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="title albumnavtitle" v-motion-slide-from-left-100>
+    <PlayBtn :source="things.source" :store="things.store" />
+    <div class="ellip">
+      {{ things.text }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useAlbumStore from "@/stores/album";
+import usePStore from "@/stores/p.ptracks";
+
+import PlayBtn from "@/components/shared/PlayBtn.vue";
+import { playSources, Routes } from "@/composables/enums";
+import { computed } from "@vue/reactivity";
+import { useRoute } from "vue-router";
+
+const things = computed(() => {
+  const route = useRoute();
+  let thing = {
+    text: "",
+    store: null,
+    source: playSources.album,
+  };
+
+  if (route.name == Routes.album) {
+    thing = {
+      source: playSources.album,
+      text: useAlbumStore().info.title,
+      store: useAlbumStore,
+    };
+  } else if (route.name == Routes.playlist) {
+    thing = {
+      source: playSources.playlist,
+      text: usePStore().info.name,
+      store: usePStore,
+    };
+  }
+
+  return thing;
+});
+</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/Album.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="title albumnavtitle" v-motion-slide-from-left-100>
-    <PlayBtn :source="playSources.album" :store="useAlbumStore" />
-    <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";
-import { playSources } from "@/composables/enums";
-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/shared/Loader.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import useLoaderStore from "../../stores/loader";
 const loader = useLoaderStore();
 </script>

src/composables/createSubPaths.ts

@@ -6,20 +6,19 @@ import { subPath } from "@/interfaces";
  * @param {string} oldpath the old path to compare with the new path.
  */
 export default function createSubPaths(
-  newpath: string | string[],
+  newpath: string,
-  oldpath: string | string[]
+  oldpath: string
 ): [string, subPath[]] {
   if (oldpath === undefined) oldpath = "";
 
-  newpath = newpath as string;
-  oldpath = oldpath as string;
-
   const newlist = newpath.split("/");
-  newlist.shift();
+
+  if (newlist[0] == "$home") {
+    newlist.shift();
+  }
 
   if (oldpath.includes(newpath)) {
     const oldlist = oldpath.split("/");
-    oldlist.shift();
 
     const current = newlist.slice(-1)[0];
     return [oldpath, createSubs(oldlist, current)];
@@ -34,7 +33,7 @@ export default function createSubPaths(
       return {
         active: false,
         name: path,
-        path: newlist.slice(0, index + 1).join("/"),
+        path: list.slice(0, index + 1).join("/"),
       };
     });
     paths.reverse();

src/stores/nav.ts

@@ -1,12 +1,26 @@
+import { playSources } from "@/composables/enums";
 import { defineStore } from "pinia";
 
-export default defineStore("navmanagement", {
+export default defineStore("navstore", {
   state: () => ({
-    showPlay: false,
+    /**
+     * Page header visibility status.
+     */
+    h_visible: false,
+    title: {
+      text: "",
+      store: null,
+      source: playSources,
+    },
   }),
   actions: {
-    toggleShowPlay(state: boolean) {
+    /**
-      this.showPlay = state;
+     * Toggles the store value of the page header visibility.
+     *
+     * @param {boolean} state The visibility state of the page header.
+     */
+    toggleShowPlay(state: boolean): void {
+      this.h_visible = state;
     },
   },
 });