rewrite tracks page of the search view

src/components/RightSideBar/Search/Main.vue

@@ -5,6 +5,7 @@
       :tabs="tabs"
       @switchTab="switchTab"
       :currentTab="currentTab"
+      :tabContent="true"
     >
       <Tab :name="currentTab" :isOnSearchPage="isOnSearchPage" />
     </TabsWrapper>

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -1,12 +1,12 @@
 <template>
-  <div id="right-tabs" class="rounded">
+  <div id="right-tabs" :class="tabContent">
     <div class="tab-buttons-wrapper">
       <div class="tabheaders rounded-sm no-scroll">
         <div
           class="tab"
           v-for="tab in tabs"
           :key="tab"
-          @click="switchTab(tab)"
+          @click="emit('switchTab', tab)"
           :class="{ activetab: tab === currentTab }"
         >
           {{ tab }}
@@ -14,7 +14,7 @@
       </div>
     </div>
 
-    <div id="tab-content" v-auto-animate>
+    <div id="tab-content" v-auto-animate v-if="tabContent">
       <slot />
     </div>
   </div>
@@ -24,22 +24,18 @@
 defineProps<{
   tabs: string[];
   currentTab: string;
+  tabContent?: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: "switchTab", tab: string): void;
 }>();
-
-function switchTab(tab: string) {
-  emit("switchTab", tab);
-}
 </script>
 
 <style lang="scss">
 #right-tabs {
   height: 100%;
   display: grid;
-  grid-template-rows: min-content 1fr;
 
   .tab-buttons-wrapper {
     display: flex;
@@ -54,4 +50,8 @@ function switchTab(tab: string) {
     padding-bottom: 1rem;
   }
 }
+
+#right-tabs.tabContent {
+  grid-template-rows: min-content 1fr;
+}
 </style>

src/components/nav/Titles/SearchTitle.vue

@@ -1,21 +1,43 @@
 <template>
   <div class="nav-search-input">
     <SearchInput :on_nav="true" />
+    <TabsWrapper
+      :tabs="tabs"
+      :currentTab="($route.params.page as string)"
+      @switchTab="(tab: string) => {
+        $router.push({ name: Routes.search, params: { page: tab } });
+        search.switchTab(tab);
+      }"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import TabsWrapper from "@/components/RightSideBar/Search/TabsWrapper.vue";
 import SearchInput from "@/components/RightSideBar/SearchInput.vue";
+import { Routes } from "@/router/routes";
+
+import useSearchStore from "@/stores/search";
+const search = useSearchStore();
+
+const tabs = ["tracks", "albums", "artists"];
 </script>
 
 <style lang="scss">
 .nav-search-input {
   align-items: center;
-  justify-content: space-evenly;
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  gap: 1rem;
 
-  & > div {
-    width: 70%;
-    margin: 0 auto;
+  #right-tabs {
+    display: grid;
+    align-items: center;
+  }
+
+  .tabheaders {
+    height: 2.25rem;
+    margin: 0;
   }
 }
 </style>