From ca211b6dcf3a3a2f7937a128e7ac87850a0f779d Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sun, 28 Aug 2022 15:37:46 +0300
Subject: [PATCH] add queue page

---
 src/assets/scss/Global/basic.scss         |  3 +-
 src/components/LeftSidebar/Navigation.vue | 40 ++++++++++++++++-------
 src/components/LeftSidebar/index.vue      |  2 --
 src/composables/enums.ts                  |  7 ++--
 src/router/index.ts                       |  6 ++++
 src/views/QueueView.vue                   | 16 +++++++++
 6 files changed, 56 insertions(+), 18 deletions(-)
 create mode 100644 src/views/QueueView.vue

diff --git a/src/assets/scss/Global/basic.scss b/src/assets/scss/Global/basic.scss
index 3fd79470..d6d9fd4a 100644
--- a/src/assets/scss/Global/basic.scss
+++ b/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 {
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index ac7ef023..90e630fa 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/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 {
diff --git a/src/components/LeftSidebar/index.vue b/src/components/LeftSidebar/index.vue
index c49add6a..21281b99 100644
--- a/src/components/LeftSidebar/index.vue
+++ b/src/components/LeftSidebar/index.vue
@@ -18,5 +18,3 @@ import useSettingsStore from "@/stores/settings";
 
 const settings = useSettingsStore();
 </script>
-
-<style lang="scss"></style>
diff --git a/src/composables/enums.ts b/src/composables/enums.ts
index 443eee64..d2b706b1 100644
--- a/src/composables/enums.ts
+++ b/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"
-}
\ No newline at end of file
+  search = "SearchView",
+  queue = "QueueView",
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 7b4fa255..9ee89336 100644
--- a/src/router/index.ts
+++ b/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"),
diff --git a/src/views/QueueView.vue b/src/views/QueueView.vue
new file mode 100644
index 00000000..69be956f
--- /dev/null
+++ b/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>