initialize settings page

src/components/nav/NavBar.vue

@@ -4,7 +4,14 @@
       <NavButtons />
       <div class="info">
         <APTitle v-show="showAPTitle" />
-        <Playlists v-show="$route.name == Routes.playlists" />
+        <SimpleTitle
+          v-show="$route.name == Routes.playlists"
+          :text="'Playlists'"
+        />
+        <SimpleTitle
+          v-show="$route.name == Routes.settings"
+          :text="'Settings'"
+        />
         <Folder v-show="$route.name == Routes.folder" :subPaths="subPaths" />
       </div>
     </div>
@@ -24,7 +31,7 @@ import { Routes } from "@/composables/enums";
 import { createSubPaths } from "@/utils";
 import { subPath } from "@/interfaces";
 import Folder from "./Titles/Folder.vue";
-import Playlists from "./Titles/Playlists.vue";
+import SimpleTitle from "./Titles/SimpleTitle.vue";
 import APTitle from "./Titles/APTitle.vue";
 import useNavStore from "@/stores/nav";
 
@@ -83,11 +90,13 @@ watch(
 
     .info {
       overflow: hidden;
+      margin: auto 0;
 
       .title {
         font-size: 1.5rem;
         font-weight: bold;
         display: flex;
+        align-items: center;
       }
     }
   }

src/components/nav/Titles/APTitle.vue

@@ -15,7 +15,6 @@ import usePStore from "@/stores/pages/playlist";
 import { computed } from "@vue/reactivity";
 import { useRoute } from "vue-router";
 
-
 const things = computed(() => {
   const route = useRoute();
   let thing = {
@@ -24,18 +23,22 @@ const things = computed(() => {
     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,
-    };
+  switch (route.name) {
+    case Routes.album:
+      thing = {
+        source: playSources.album,
+        text: useAlbumStore().info.title,
+        store: useAlbumStore,
+      };
+      break;
+    case Routes.playlist:
+      thing = {
+        source: playSources.playlist,
+        text: usePStore().info.name,
+        store: usePStore,
+      };
+      break;
+      break;
   }
 
   return thing;

src/components/nav/Titles/Folder.vue

@@ -62,14 +62,9 @@ onUpdated(() => {
       height: 2.25rem;
       display: flex;
       align-items: center;
-      margin-left: $smaller;
       overflow: auto;
       padding-right: $smaller;
 
-      // @include for-desktop-down {
-      //   max-width: 9rem;
-      // }
-
       .icon {
         height: 2rem;
         aspect-ratio: 1;

src/components/nav/Titles/Playlists.vue

@@ -1,7 +0,0 @@
-<template>
-  <div
-    class="title"
-  >
-    Playlists
-  </div>
-</template>

src/components/nav/Titles/SimpleTitle.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="title">{{ text }}</div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  text: string;
+}>();
+</script>