animate navigation list and logo

- move search main into right-sidebar > search
-

src/components/RightSideBar/Main.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import Search from "./Search.vue";
+import Search from "./Search/Main.vue";
 import UpNext from "./Queue.vue";
 import Main from "./Home/Main.vue";
 import useTabStore from "../../stores/tabs";

src/components/RightSideBar/Search/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="right-search">
     <TabsWrapper>
-      <Tab name="tracks" v-motion-slide-visible-left>
+      <Tab name="tracks">
         <TracksGrid />
       </Tab>
       <Tab name="albums">
@@ -11,16 +11,20 @@
         <ArtistGrid />
       </Tab>
     </TabsWrapper>
+    <component :is="s.currentTab" />
   </div>
 </template>
 
 <script setup lang="ts">
 import TabsWrapper from "./TabsWrapper.vue";
 import Tab from "./Tab.vue";
-import TracksGrid from "./Search/TracksGrid.vue";
-import AlbumGrid from "./Search/AlbumGrid.vue";
+import TracksGrid from "./TracksGrid.vue";
+import AlbumGrid from "./AlbumGrid.vue";
+import ArtistGrid from "./ArtistGrid.vue";
 import "@/assets/css/Search/Search.scss";
-import ArtistGrid from "./Search/ArtistGrid.vue";
+import useSearchStore from "@/stores/search";
+const s = useSearchStore();
+
 </script>
 
 <style lang="scss">

src/components/RightSideBar/Search/Tab.vue

@@ -1,11 +1,11 @@
 <template>
-  <div v-show="name == s.currentTab">
+  <div v-show="name == s.currentTab"  v-motion-slide-visible-top>
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import useSearchStore from "../../stores/search";
+import useSearchStore from "@/stores/search";
 const s = useSearchStore();
 defineProps<{
   name: string;

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import useSearchStore from "../../stores/search";
+import useSearchStore from "@/stores/search";
 
 const s = useSearchStore();
 </script>
@@ -40,16 +40,23 @@ const s = useSearchStore();
       padding: $small;
       text-transform: capitalize;
       cursor: pointer;
+      display: flex;
+      justify-content: center;
+      transition: all 0.3s ease;
+      width: 4rem;
     }
 
     .activetab {
       background-color: $accent;
+      width: 6rem;
+      transition: all 0.3s ease;
     }
   }
 
   #tab-content {
     height: 100%;
     overflow: auto;
+    overflow-x: hidden;
     border-radius: $small;
     background-color: $gray;
     // overflow: hidden;