From dcd27921ae9bb83f7e3aaec6455f4fb12ed6aa1d Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 19 Aug 2022 16:39:25 +0300
Subject: [PATCH] add switch tabs buttons to right sidebar

---
 src/components/RightSideBar/Queue.vue       |  2 --
 src/components/RightSideBar/SearchInput.vue | 40 ++++++++++++++++-----
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue
index 88c9ddd..33a1a45 100644
--- a/src/components/RightSideBar/Queue.vue
+++ b/src/components/RightSideBar/Queue.vue
@@ -79,9 +79,7 @@ onUpdated(() => {
   .r-grid {
     position: relative;
     height: 100%;
-    // display: grid;
 
-    // gap: 1rem;
 
     .scrollable-r {
       height: 100%;
diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue
index 576b3d8..328bea4 100644
--- a/src/components/RightSideBar/SearchInput.vue
+++ b/src/components/RightSideBar/SearchInput.vue
@@ -1,11 +1,11 @@
 <template>
-  <div
-    id="gsearch-input"
-    class="bg-black rounded"
-    :class="{ 'search-focused': focused }"
-  >
-    <div id="ginner" tabindex="0">
-      <SearchSvg />
+  <div id="gsearch-input" class="rounded">
+    <div
+      id="ginner"
+      tabindex="0"
+      class="bg-black rounded"
+      :class="{ 'search-focused': focused }"
+    >
       <input
         id="globalsearch"
         v-model="search.query"
@@ -14,6 +14,11 @@
         @focus="focused = true"
         @blur="focused = false"
       />
+      <SearchSvg />
+    </div>
+    <div class="buttons rounded bg-black">
+      <button @click="tabs.switchToQueue"><QueueSvg /></button>
+      <button @click="tabs.switchToSearch"><SearchSvg /></button>
     </div>
   </div>
 </template>
@@ -22,21 +27,38 @@
 import { ref } from "vue";
 import useSearchStore from "../../stores/search";
 import SearchSvg from "../../assets/icons/search.svg";
+import QueueSvg from "../../assets/icons/queue.svg";
+import useTabStore from "../../stores/tabs";
 
 const search = useSearchStore();
+const tabs = useTabStore();
 const focused = ref(false);
 </script>
 
 <style lang="scss">
 #gsearch-input {
-  padding: $smaller;
+  display: grid;
+  grid-template-columns: 1fr 7rem;
+  gap: 1rem;
+
+  .buttons {
+    display: grid;
+    grid-auto-flow: column;
+    overflow: hidden;
+
+    button {
+      padding: 0 $small;
+      height: 100%;
+      border-radius: 0;
+    }
+  }
 
   #ginner {
     width: 100%;
     display: flex;
     align-items: center;
     gap: $smaller;
-    margin-left: $small;
+    padding: 0 1rem;
 
     input {
       width: 100%;