hide queue page entry from the sidebar if right sidebar is on

src/components/AlbumView/Header.vue

@@ -9,7 +9,7 @@
     }"
   >
     <div class="info" :class="{ nocontrast: isLight(album.colors[0]) }">
-      <div class="art rounded">
+      <div class="art">
         <img
           :src="imguri.artist + album.artistimg"
           alt=""
@@ -17,35 +17,35 @@
           loading="lazy"
         />
       </div>
-      <div class="top">
+      <div>
-        <div class="h">
+        <div class="top">
-          <span v-if="album.is_soundtrack">Soundtrack</span>
+          <div class="h">
-          <span v-else-if="album.is_compilation">Compilation</span>
+            <span v-if="album.is_soundtrack">Soundtrack</span>
-          <span v-else-if="album.is_single">Single</span>
+            <span v-else-if="album.is_compilation">Compilation</span>
-          <span v-else>Album</span>
+            <span v-else-if="album.is_single">Single</span>
+            <span v-else>Album</span>
+          </div>
+          <div class="title ellip">
+            {{ album.title }}
+          </div>
         </div>
-        <div class="title ellip">
+        <div class="bottom">
-          {{ album.title }}
+          <div class="stats">
+            {{ album.artist }} • {{ album.date }} • {{ album.count }} Tracks •
+            {{ formatSeconds(album.duration, true) }}
+          </div>
+          <PlayBtnRect
+            :source="playSources.album"
+            :store="useAlbumStore"
+            :background="getButtonColor(album.colors)"
+          />
         </div>
       </div>
-      <div class="bottom">
-        <div class="stats">
-          {{ album.artist }} • {{ album.date }} • {{ album.count }} Tracks •
-          {{ formatSeconds(album.duration, true) }}
-        </div>
-        <PlayBtnRect
-          :source="playSources.album"
-          :store="useAlbumStore"
-          :background="getButtonColor(album.colors)"
-        />
-      </div>
     </div>
     <div
       class="rounded shadow-lg image bigimg"
       :style="{ backgroundImage: `url(${imguri.thumb + album.image})` }"
-    >
+    ></div>
-      <!-- <img :src="imguri.thumb + album.image" /> -->
-    </div>
   </div>
 </template>
 
@@ -117,21 +117,6 @@ useVisibility(albumheaderthing, handleVisibilityState);
     }
   }
 
-  .art {
-    grid-area: artist;
-    display: flex;
-    align-items: flex-end;
-    position: relative;
-
-    img {
-      height: 6rem;
-      aspect-ratio: 1;
-      object-fit: cover;
-      transition: all 0.2s ease-in-out;
-      user-select: none;
-    }
-  }
-
   .nocontrast {
     color: $black;
   }
@@ -140,7 +125,14 @@ useVisibility(albumheaderthing, handleVisibilityState);
     width: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
+    justify-content: space-between;
+
+    img {
+      height: 6rem;
+      aspect-ratio: 1;
+      object-fit: cover;
+      user-select: none;
+    }
 
     .top {
       .h {

src/components/LeftSidebar/Navigation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="side-nav-container">
     <router-link
-      v-for="menu in menus"
+      v-for="menu in filtered_menus"
       :key="menu.name"
       :to="{ name: menu.route_name, params: menu?.params }"
     >
@@ -22,12 +22,17 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "@vue/reactivity";
+
+import { Routes } from "@/composables/enums";
+import useSettingsStore from "@/stores/settings";
+
 import PlaylistSvg from "../../assets/icons/playlist.svg";
 import FolderSvg from "../../assets/icons/folder.svg";
 import SettingsSvg from "../../assets/icons/settings.svg";
 import SearchSvg from "../../assets/icons/search.svg";
 
-import { Routes } from "@/composables/enums";
+const settings = useSettingsStore();
 
 const menus = [
   {
@@ -64,6 +69,14 @@ const menus = [
     icon: SettingsSvg,
   },
 ];
+
+const filtered_menus = computed(() => {
+  if (settings.hide_queue_page) {
+    return menus.filter((menu) => menu.route_name !== Routes.queue);
+  }
+
+  return menus;
+});
 </script>
 
 <style lang="scss">

src/stores/settings/index.ts

@@ -24,6 +24,9 @@ export default defineStore("settings", {
     disable_show_alt_np(): boolean {
       return !this.use_sidebar;
     },
+    hide_queue_page(): boolean {
+      return this.use_sidebar;
+    },
   },
   persist: true,
 });