add queue page

src/assets/scss/Global/basic.scss

@@ -82,9 +82,10 @@ button {
 }
 
 .separator {
-  border-top: 0.1px $separator solid;
+  border-top: 1px $separator solid;
   color: transparent;
   margin: $small 0 $small 0;
+  opacity: 0.5;
 }
 
 .no-border {

src/components/LeftSidebar/Navigation.vue

@@ -5,8 +5,18 @@
       :key="menu.name"
       :to="{ name: menu.route_name, params: menu?.params }"
     >
-      <div v-if="menu.separator" :class="{ separator: menu.separator }"></div>
-      <div class="nav-button" id="home-button" v-else>
+      <div
+        v-if="menu.separator"
+        :class="{
+          separator: menu.separator,
+        }"
+      ></div>
+      <div
+        class="nav-button"
+        id="home-button"
+        :class="{ active: menu.route_name === $route.name }"
+        v-else
+      >
         <div class="in">
           <component :is="menu.icon"></component>
           <span>{{ menu.name }}</span>
@@ -36,6 +46,15 @@ const menus = [
     params: { path: "$home" },
     icon: FolderSvg,
   },
+
+  {
+    separator: true,
+  },
+  {
+    name: "queue",
+    route_name: Routes.queue,
+    icon: PlaylistSvg,
+  },
   {
     name: "search",
     route_name: Routes.search,
@@ -54,29 +73,25 @@ const menus = [
 
 <style lang="scss">
 .side-nav-container {
-  color: #fff;
   text-transform: capitalize;
   margin-top: 1rem;
+  font-size: 0.85rem;
+
+  .active {
+    background-color: $gray4;
+  }
 
   .nav-button {
     border-radius: $small;
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
-    padding: 0.6rem 0;
+    padding: $smaller 0;
 
     &:hover {
       background-color: $gray3;
     }
 
-    .nav-icon {
-      height: 2rem;
-      width: 2rem;
-      margin: 0 $small 0 $small;
-      border-radius: $small;
-      background-color: rgb(26, 24, 24);
-    }
-
     .in {
       display: flex;
       align-items: center;
@@ -90,6 +105,7 @@ const menus = [
   svg {
     margin: 0 $small 0 $small;
     border-radius: $small;
+    transform: scale(0.9);
   }
 
   svg > path {

src/components/LeftSidebar/index.vue

@@ -18,5 +18,3 @@ import useSettingsStore from "@/stores/settings";
 
 const settings = useSettingsStore();
 </script>
-
-<style lang="scss"></style>

src/composables/enums.ts

@@ -22,7 +22,7 @@ export enum ContextSrc {
   PHeader = "PHeader",
   Track = "Track",
   AHeader = "AHeader",
-  FHeader = "FHeader"
+  FHeader = "FHeader",
 }
 
 export enum Routes {
@@ -34,5 +34,6 @@ export enum Routes {
   album = "AlbumView",
   artists = "ArtistsView",
   settings = "SettingsView",
-  search = "SearchView"
-}
+  search = "SearchView",
+  queue = "QueueView",
+}

src/router/index.ts

@@ -12,6 +12,7 @@ import PlaylistList from "@/views/PlaylistList.vue";
 import PlaylistView from "@/views/playlist/index.vue";
 import SettingsView from "@/views/SettingsView.vue";
 import SearchView from "@/views/Search.vue";
+import QueueView from "@/views/QueueView.vue";
 
 import { createRouter, createWebHashHistory } from "vue-router";
 
@@ -101,6 +102,11 @@ const routes = [
     name: "SearchView",
     component: SearchView,
   },
+  {
+    path: "/queue",
+    name: "QueueView",
+    component: QueueView,
+  },
   {
     path: "/:pathMatch(.*)",
     component: () => import("../views/NotFound.vue"),

src/views/QueueView.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="queue-view">
+    <Queue />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Queue from "@/components/RightSideBar/Queue.vue";
+</script>
+
+<style lang="scss">
+.queue-view {
+  background-color: $black;
+  height: 100%;
+}
+</style>