Introduce tabs to right sidebar

- new icons
- rename upnext.vue to queue.vue
- other tiny changes

src/components/RightSideBar/Main.vue

@@ -1,20 +1,25 @@
 <template>
   <div class="r-sidebar">
-    <!-- <div class="m-np"> -->
-      <!-- <NowPlaying class="hidden"/> -->
-    <!-- </div> -->
-    <div class="s">
-      <Search
-        v-model:search="search"
-        @expandSearch="expandSearch"
-        @collapseSearch="collapseSearch"
-      />
-    </div>
-    <div class="q">
-      <UpNext v-model:up_next="up_next" @expandQueue="expandQueue" />
-    </div>
-    <div class="r">
-      <RecommendedArtist />
+    <div class="grid">
+      <div class="r-content border rounded">
+        <div class="r-dash" v-if="current_tab == tabs.home">
+          <DashBoard/>
+        </div>
+        <div class="r-search" v-if="current_tab == tabs.search">
+          <Search
+            v-model:search="search"
+            @expandSearch="expandSearch"
+            @collapseSearch="collapseSearch"
+          />
+        </div>
+
+        <div class="r-queue" v-if="current_tab == tabs.queue">
+          <UpNext v-model:up_next="up_next" @expandQueue="expandQueue" />
+        </div>
+      </div>
+      <div class="tab-keys card-dark border">
+        <Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" />
+      </div>
     </div>
   </div>
 </template>
@@ -22,8 +27,11 @@
 <script setup>
 import { ref } from "vue";
 import Search from "../Search.vue";
-import UpNext from "./UpNext.vue";
-import RecommendedArtist from "@/components/RightSideBar/Recommendation.vue";
+import UpNext from "./Queue.vue";
+import Tabs from "./Tabs.vue";
+import Main from "./Home/Main.vue";
+
+const DashBoard = Main;
 
 let up_next = ref(true);
 let search = ref(false);
@@ -39,17 +47,54 @@ const expandSearch = () => {
 const collapseSearch = () => {
   search.value = false;
 };
+
+const tabs = {
+  home: "home",
+  search: "search",
+  queue: "queue",
+};
+
+const current_tab = ref(tabs.search);
+
+function changeTab(tab) {
+  current_tab.value = tab;
+}
 </script>
 
 <style lang="scss">
 .r-sidebar {
-  border-radius: 5px;
-  margin-right: 0.5rem;
-  margin-bottom: $small;
-  overflow-y: auto;
-  width: 30em;
-  display: grid;
-  grid-auto-flow: row;
-  grid-template-rows: min-content min-content auto;
+  width: 34em;
+
+  .grid {
+    height: 100%;
+    display: grid;
+    grid-template-areas: "content tabs";
+
+    .r-content {
+      grid-area: content;
+      width: 100%;
+      overflow: hidden;
+      margin: $small $small $small 0;
+
+      .r-search {
+        height: 100%;
+      }
+
+      .r-dash {
+        height: 100%;
+      }
+
+      .r-queue {
+        height: 100%;
+      }
+    }
+
+    .tab-keys {
+      grid-area: tabs;
+      width: 3rem;
+      padding: $small;
+      margin-left: $small;
+    }
+  }
 }
 </style>