refactor simple nav componnents

+ add nav for favorite artists

src/components/nav/NavBar.vue

@@ -15,10 +15,26 @@
         <ArtistDiscographyTitle
           v-if="$route.name == Routes.artistDiscography"
         />
-        <ArtistTracksTitle v-if="$route.name == Routes.artistTracks" />
+        <SimpleNav
-        <FavoritesNav v-if="$route.name === Routes.favorites" />
+          v-if="$route.name == Routes.artistTracks"
-        <FavoriteAlbumsNav v-if="$route.name === Routes.favoriteAlbums" />
+          :text="$route.query.artist as string || 'Artist Tracks'"
-        <FavoriteTracksNav v-if="$route.name === Routes.favoriteTracks" />
+        />
+        <SimpleNav
+          v-if="$route.name === Routes.favorites"
+          :text="'Favorites ❤️'"
+        />
+        <SimpleNav
+          v-if="$route.name === Routes.favoriteAlbums"
+          :text="'Favorite Albums ❤️'"
+        />
+        <SimpleNav
+          v-if="$route.name === Routes.favoriteArtists"
+          :text="'Favorite Artists ❤️'"
+        />
+        <SimpleNav
+          v-if="$route.name === Routes.favoriteTracks"
+          :text="'Favorite Tracks ❤️'"
+        />
       </div>
     </div>
   </div>
@@ -35,18 +51,14 @@ import { createSubPaths } from "@/utils";
 import NavButtons from "./NavButtons.vue";
 
 import FolderTitle from "./Titles/Folder.vue";
+import SimpleNav from "./Titles/SimpleNav.vue";
 import PlaylistsTitle from "./Titles/PlaylistsTitle.vue";
 import QueueTitle from "./Titles/QueueTitle.vue";
 import SearchTitle from "./Titles/SearchTitle.vue";
 import SettingsTitle from "./Titles/SettingsTitle.vue";
 import ArtistDiscographyTitle from "./Titles/ArtistDiscographyTitle.vue";
-import ArtistTracksTitle from "./Titles/ArtistTracksTitle.vue";
-import FavoritesNav from "./Titles/FavoritesNav.vue";
-import FavoriteAlbumsNav from "./Titles/FavoriteAlbumsNav.vue";
-import FavoriteTracksNav from "./Titles/FavoriteTracksNav.vue";
 
 const route = useRoute();
-
 const subPaths = ref<subPath[]>([]);
 
 watch(

src/components/nav/Titles/ArtistTracksTitle.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="artist-tracks-nav">
-    <h2 style="margin: 0">{{ $route.query.artist }}</h2>
-  </div>
-</template>

src/components/nav/Titles/FavoriteAlbumsNav.vue

@@ -1,3 +0,0 @@
-<template>
-  <h2 style="margin: 0">Favorite albums ❤️</h2>
-</template>

src/components/nav/Titles/FavoriteTracksNav.vue

@@ -1,3 +0,0 @@
-<template>
-  <h2 style="margin: 0">Favorite Tracks ❤️</h2>
-</template>

src/components/nav/Titles/FavoritesNav.vue

@@ -1,3 +0,0 @@
-<template>
-  <h2 style="margin: 0">Favorites</h2>
-</template>

src/components/nav/Titles/PlaylistsTitle.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="playlists-nav">
-    <SimpleTitle :text="'Playlists'" />
+    <SimpleNav :text="'Playlists'" />
     <div class="buttons">
       <button @click="showNewPlaylistModal()"><PlusSvg /> New Playlist</button>
     </div>
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import SimpleTitle from "./SimpleTitle.vue";
+import SimpleNav from "./SimpleNav.vue";
 import PlusSvg from "../../../assets/icons/plus.svg";
 
 import useModalStore from "@/stores/modal";

src/components/nav/Titles/SettingsTitle.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="settings-nav">
-    <SimpleTitle :text="'Settings'" />
+    <SimpleNav :text="'Settings'" />
     <Nav />
   </div>
 </template>
 
 <script setup lang="ts">
-import SimpleTitle from "./SimpleTitle.vue";
+import SimpleNav from "./SimpleNav.vue";
 import Nav from "@/components/SettingsView/Nav.vue";
 </script>
 

src/components/nav/Titles/SimpleNav.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="title">{{ text }}</div>
+  <h2 style="margin: 0">{{ text }}</h2>
 </template>
 
 <script setup lang="ts">