show use_alt_np as disabled if dependent setting is disabled

+ add getters to settings store
+ add use sidebar setting

src/components/nav/NavBar.vue

@@ -8,17 +8,14 @@
           overflow: $route.name === Routes.search ? 'visible' : 'hidden',
         }"
       >
-        <APTitle v-show="showAPTitle" />
+        <APTitle v-if="showAPTitle" />
         <SimpleTitle
-          v-show="$route.name == Routes.playlists"
+          v-if="$route.name == Routes.playlists"
           :text="'Playlists'"
         />
-        <SimpleTitle
-          v-show="$route.name == Routes.settings"
-          :text="'Settings'"
-        />
-        <Folder v-show="$route.name == Routes.folder" :subPaths="subPaths" />
-        <SearchTitle v-show="$route.name == Routes.search" />
+        <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" />
       </div>
     </div>
 
@@ -89,6 +86,7 @@ watch(
   display: grid;
   grid-template-columns: 1fr min-content;
   width: 100%;
+  gap: $small;
 
   .left {
     display: grid;
@@ -97,7 +95,6 @@ watch(
 
     .info {
       margin: auto 0;
-      // overflow: hidden;
 
       .title {
         font-size: 1.5rem;

src/components/nav/Titles/Folder.vue

@@ -2,18 +2,24 @@
   <div id="folder-nav-title">
     <div class="folder">
       <div class="fname">
-        <div class="icon image"></div>
+        <div
+          class="icon image"
+          @click="
+            $router.push({ name: Routes.folder, params: { path: '$home' } })
+          "
+        ></div>
         <div class="paths">
           <div
             class="path"
-            v-for="path in subPaths"
+            v-for="path in subPaths.slice(1)"
             :key="path.path"
             :class="{ inthisfolder: path.active }"
-            @click="
-              $router.push({ name: 'FolderView', params: { path: path.path } })
-            "
           >
-            <span class="text">{{ path.name }}</span>
+            <router-link
+              class="text"
+              :to="{ name: Routes.folder, params: { path: path.path } }"
+              >{{ path.name }}</router-link
+            >
           </div>
         </div>
       </div>
@@ -25,6 +31,7 @@
 import { focusElem } from "@/utils";
 import { subPath } from "@/interfaces";
 import { onUpdated } from "vue";
+import { Routes } from "@/composables/enums";
 
 defineProps<{
   subPaths: subPath[];
@@ -43,7 +50,6 @@ onUpdated(() => {
   .folder {
     display: flex;
     gap: $small;
-    width: inherit;
 
     .playbtnrect {
       height: 2.25rem;
@@ -64,7 +70,6 @@ onUpdated(() => {
       height: 2.25rem;
       display: flex;
       align-items: center;
-      width: 100%;
       overflow: auto;
       padding-right: $smaller;
 
@@ -74,7 +79,7 @@ onUpdated(() => {
         background-image: url("../../../assets/icons/folder.fill.svg");
         background-size: 1.5rem;
         margin-left: $smaller;
-        background-position: 65% 50%;
+        cursor: pointer;
       }
 
       .paths {
@@ -91,7 +96,10 @@ onUpdated(() => {
         .path {
           white-space: nowrap;
           margin: auto 0;
-          cursor: default;
+
+          a {
+            cursor: default;
+          }
 
           .text {
             padding: $smaller;
@@ -102,13 +110,11 @@ onUpdated(() => {
             content: "/";
             font-size: small;
             margin-right: $smaller;
-            opacity: .25;
+            opacity: 0.25;
           }
 
           &:first-child {
-            &::before {
-              display: none;
-            }
+            display: none;
           }
 
           &:last-child {