animate navigation list and logo

- move search main into right-sidebar > search
-

src/components/RightSideBar/Search/Main.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="right-search">
+    <TabsWrapper>
+      <Tab name="tracks">
+        <TracksGrid />
+      </Tab>
+      <Tab name="albums">
+        <AlbumGrid />
+      </Tab>
+      <Tab name="artists">
+        <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 "./TracksGrid.vue";
+import AlbumGrid from "./AlbumGrid.vue";
+import ArtistGrid from "./ArtistGrid.vue";
+import "@/assets/css/Search/Search.scss";
+import useSearchStore from "@/stores/search";
+const s = useSearchStore();
+
+</script>
+
+<style lang="scss">
+.right-search {
+  position: relative;
+  overflow: hidden;
+  width: auto;
+  height: 100%;
+
+  .no-res {
+    text-align: center;
+    display: grid;
+    height: calc(100% - $small);
+    place-items: center;
+    font-size: 2rem;
+    transition: all 0.3s ease;
+    line-height: 4rem !important;
+
+    .highlight {
+      padding: $small;
+      background-color: rgb(29, 26, 26);
+    }
+  }
+
+  .heading {
+    padding: $medium;
+    border-radius: $small;
+    margin-bottom: $small;
+    font-size: 2rem;
+    color: $white;
+  }
+
+  .input {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+}
+
+.right-search .scrollable {
+  overflow-y: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

src/components/RightSideBar/Search/Tab.vue

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

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="right-tabs">
+    <div id="tabheaders">
+      <div
+        class="tab rounded"
+        v-for="slot in $slots.default()"
+        :key="slot.key"
+        @click="s.changeTab(slot.props.name)"
+        :class="{ activetab: slot.props.name === s.currentTab }"
+      >
+        {{ slot.props.name }}
+      </div>
+    </div>
+    <div id="tab-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useSearchStore from "@/stores/search";
+
+const s = useSearchStore();
+</script>
+
+<style lang="scss">
+#right-tabs {
+  height: 100%;
+  margin-right: $small;
+  display: grid;
+  grid-template-rows: min-content 1fr;
+
+  #tabheaders {
+    display: flex;
+    gap: $small;
+    margin: $small 0;
+
+    .tab {
+      background-color: $gray3;
+      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;
+  }
+}
+</style>