Move new playlist button to nav

src/components/nav/NavBar.vue

@@ -9,19 +9,16 @@
         }"
       >
         <APTitle v-if="showAPTitle" />
-        <SimpleTitle
-          v-if="$route.name == Routes.playlists"
-          :text="'Playlists'"
-        />
         <SimpleTitle v-if="$route.name == Routes.settings" :text="'Settings'" />
         <Folder v-if="$route.name == Routes.folder" :subPaths="subPaths" />
         <SearchTitle v-if="$route.name == Routes.search" />
+        <PlaylistsTitle v-if="$route.name == Routes.playlists" />
       </div>
     </div>
-
+<!-- 
     <div class="center rounded">
       <Loader />
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -40,6 +37,7 @@ import useNavStore from "@/stores/nav";
 
 import { computed } from "@vue/reactivity";
 import SearchTitle from "./Titles/SearchTitle.vue";
+import PlaylistsTitle from "./Titles/PlaylistsTitle.vue";
 
 const route = useRoute();
 const nav = useNavStore();
@@ -86,7 +84,7 @@ watch(
   display: grid;
   grid-template-columns: 1fr min-content;
   width: 100%;
-  gap: $small;
+  // gap: $small;
 
   .left {
     display: grid;

src/components/nav/Titles/PlaylistsTitle.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="playlists-nav">
+    <SimpleTitle :text="'Playlists'" />
+    <div class="buttons">
+      <button @click="showNewPlaylistModal()"><PlusSvg /> New Playlist</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SimpleTitle from "./SimpleTitle.vue";
+import PlusSvg from "../../../assets/icons/plus.svg";
+
+import useModalStore from "@/stores/modal";
+const { showNewPlaylistModal } = useModalStore();
+</script>
+
+<style lang="scss">
+.playlists-nav {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+
+  button {
+    padding-right: $small;
+  }
+}
+</style>