Implement fuzzy page search using fuse.js (#86)

src/components/nav/NavBar.vue

@@ -2,15 +2,19 @@
   <div class="topnav">
     <div class="left">
       <NavButtons />
+
       <div
-        class="info"
         :style="{
-          overflow: $route.name === Routes.search ? 'visible' : 'hidden',
+          overflowY: hideOverflow() ? 'visible' : 'hidden',
         }"
+        class="info"
       >
-        <APTitle v-if="showAPTitle" />
-        <SimpleTitle v-if="$route.name == Routes.settings" :text="'Settings'" />
-        <Folder v-if="$route.name == Routes.folder" :subPaths="subPaths" />
+        <APTitle
+          v-if="$route.name == Routes.album || $route.name == Routes.playlist"
+          :header_shown="nav.h_visible"
+        />
+        <SettingsTitle v-if="$route.name == Routes.settings" :text="'Settings'" />
+        <FolderTitle v-if="$route.name == Routes.folder" :subPaths="subPaths" />
         <SearchTitle v-if="$route.name == Routes.search" />
         <PlaylistsTitle v-if="$route.name == Routes.playlists" />
         <QueueTitle v-if="$route.name == Routes.queue" />
@@ -26,7 +30,6 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useRoute } from "vue-router";
-import { computed } from "@vue/reactivity";
 
 import { subPath } from "@/interfaces";
 import useNavStore from "@/stores/nav";
@@ -34,26 +37,26 @@ import { createSubPaths } from "@/utils";
 import { Routes } from "@/composables/enums";
 
 import NavButtons from "./NavButtons.vue";
-// import Loader from "../shared/Loader.vue";
 
-import Folder from "./Titles/Folder.vue";
+import FolderTitle from "./Titles/Folder.vue";
 import SimpleTitle from "./Titles/SimpleTitle.vue";
 import APTitle from "./Titles/APTitle.vue";
 import SearchTitle from "./Titles/SearchTitle.vue";
 import PlaylistsTitle from "./Titles/PlaylistsTitle.vue";
 import QueueTitle from "./Titles/QueueTitle.vue";
+import SettingsTitle from "./Titles/SettingsTitle.vue";
 
 const route = useRoute();
 const nav = useNavStore();
 
 const subPaths = ref<subPath[]>([]);
 
-const showAPTitle = computed(() => {
-  return (
-    (route.name == Routes.album || route.name == Routes.playlist) &&
-    !nav.h_visible
-  );
-});
+function hideOverflow() {
+  const { name } = route;
+  const { album, playlist, search, folder } = Routes;
+
+  return (album + playlist + search + folder).includes(name as string);
+}
 
 watch(
   () => route.name,
@@ -88,7 +91,6 @@ watch(
   display: grid;
   grid-template-columns: 1fr min-content;
   width: 100%;
-  // gap: $small;
 
   .left {
     display: grid;