move global search to right sidebar

src/components/LeftSidebar/Navigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="side-nav-container border" :class="{ collapsed: collapsed }">
+  <div class="side-nav-container" :class="{ collapsed: collapsed }">
     <router-link :to="{ name: 'Home' }">
       <div class="nav-button" id="home-button">
         <div class="in">
@@ -75,14 +75,12 @@ export default {
 <style lang="scss">
 .collapsed {
   .nav-button {
-    font-size: smaller;
     margin-top: 5px;
-    align-items: center;
-    justify-content: center;
 
     span {
       display: none;
     }
+
     .in {
       width: 100%;
       flex-direction: column;
@@ -93,8 +91,9 @@ export default {
 .side-nav-container {
   padding: $small;
   color: #fff;
-  margin-bottom: 10px;
+  margin-bottom: 1rem;
   padding-top: 10px;
+  margin-top: 1rem;
 
   .nav-button {
     border-radius: $small;
@@ -105,7 +104,33 @@ export default {
     padding: 0.6rem 0 0.6rem 0;
 
     &:hover {
-      background-color: rgb(5, 80, 150);
+      #home-icon {
+        background-color: rgba(145, 58, 58, 0.555);
+      }
+
+      #album-icon {
+        background-color: rgba(113, 58, 145, 0.555);
+      }
+
+      #artists-icon {
+        background-color: rgba(13, 72, 139, 0.555);
+      }
+
+      #playlists-icon {
+        background-color: rgba(206, 13, 132, 0.555);
+      }
+
+      #mixes-icon {
+        background-color: rgba(0, 85, 81, 0.555);
+      }
+
+      #folders-icon {
+        background-color: rgba(90, 89, 3, 0.596);
+      }
+
+      #settings-icon {
+        background-color: rgba(129, 106, 106, 0.596);
+      }
     }
 
     .nav-icon {
@@ -130,7 +155,7 @@ export default {
     #settings-icon {
       background-size: 1.5rem;
     }
-
+  
     #home-icon {
       background-image: url(../../assets/icons/home.svg);
     }

src/components/RightSideBar/Main.vue

@@ -0,0 +1,55 @@
+<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>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Search from "../Search.vue";
+import UpNext from "./UpNext.vue";
+import RecommendedArtist from "@/components/RightSideBar/Recommendation.vue";
+
+let up_next = ref(true);
+let search = ref(false);
+
+const expandQueue = () => {
+  up_next.value = !up_next.value;
+};
+
+const expandSearch = () => {
+  search.value = true;
+};
+
+const collapseSearch = () => {
+  search.value = false;
+};
+</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;
+}
+</style>

src/components/RightSideBar/UpNext.vue

@@ -25,37 +25,7 @@
         :class="{ v0: !is_expanded, v1: is_expanded }"
         class="scrollable border"
       >
-        <div
-          class="song-item h-1"
-          v-for="song in queue"
-          :key="song"
-          @click="playThis(song)"
-          :class="{
-            currentInQueue: current.id == song.id,
-          }"
-        >
-          <div
-            class="album-art image"
-            :style="{
-              backgroundImage: `url(&quot;${song.image}&quot;)`,
-            }"
-          >
-            <div
-              class="now-playing-track image"
-              v-if="current.id == song.id"
-              :class="{ active: is_playing, not_active: !is_playing }"
-            ></div>
-          </div>
-          <div class="tags">
-            <div class="title ellip">{{ song.title }}</div>
-            <hr />
-            <div class="artist ellip">
-              <span v-for="artist in putCommas(song.artists)" :key="artist">{{
-                artist
-              }}</span>
-            </div>
-          </div>
-        </div>
+        <TrackItem v-for="song in queue" :key="song" :track="song" />
       </div>
     </div>
   </div>
@@ -65,16 +35,14 @@
 import { ref, toRefs } from "@vue/reactivity";
 import perks from "@/composables/perks.js";
 import audio from "@/composables/playAudio.js";
-import state from "@/composables/state.js";
 import { watch } from "@vue/runtime-core";
+import TrackItem from "../shared/TrackItem.vue";
 
 export default {
   props: ["up_next"],
   setup(props, { emit }) {
     const is_expanded = toRefs(props).up_next;
-
     const queue = ref(perks.queue);
-    const current = ref(perks.current);
     const next = ref(perks.next);
 
     let collapse = () => {
@@ -90,27 +58,18 @@ export default {
     });
 
     const { playNext } = audio;
-    const { playAudio } = audio;
-
-    const playThis = (song) => {
-      playAudio(song.filepath);
-      perks.current.value = song;
-    };
 
     const putCommas = perks.putCommas;
-
     return {
       collapse,
       is_expanded,
-      is_playing: state.is_playing,
       playNext,
-      playThis,
       putCommas,
       queue,
-      current,
       next,
     };
   },
+  components: { TrackItem },
 };
 </script>
 
@@ -207,38 +166,4 @@ export default {
     background-color: transparent;
   }
 }
-
-.up-next .scrollable .song-item {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-
-  &:hover {
-    cursor: pointer;
-    background-color: $blue;
-  }
-
-  hr {
-    border: none;
-    margin: 0.1rem;
-  }
-
-  .album-art {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: 3rem;
-    height: 3rem;
-    margin: 0 0.5rem 0 0;
-    border-radius: 0.5rem;
-    background-image: url(../../assets/images/null.webp);
-  }
-  .artist {
-    width: 20rem;
-    font-size: small;
-    color: rgba(255, 255, 255, 0.637);
-  }
-}
 </style>

src/components/Search.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="right-search border" ref="searchComponent">
     <div class="input">
-      <div class="search-icon image"></div>
+      <Loader />
       <Filters :filters="filters" @removeFilter="removeFilter" />
       <div class="input-loader border">
         <input
@@ -13,7 +13,8 @@
           placeholder="find your music"
           v-model="query"
         />
-        <Loader />
+        <div class="search-icon image"></div>
+        <!--  -->
       </div>
       <div
         class="suggestions v00"

src/components/Search/Loader.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="loader" v-if="loading"></div>
+  <div class="loaderx" :class="{ loader: loading, not_loader: !loading }">
+    <div class="content" v-if="!loading">/</div>
+  </div>
 </template>
 
 <script>
@@ -14,12 +16,15 @@ export default {
 </script>
 
 <style lang="scss">
-.loader {
+.loaderx {
   position: absolute;
-  right: 0.65rem;
+  left: 0.65rem;
   top: 0.65rem;
   width: 1.5rem;
   height: 1.5rem;
+}
+
+.loader {
   border: dotted $blue;
   border-radius: 50%;
   animation: spin 0.25s linear infinite;
@@ -33,4 +38,10 @@ export default {
     }
   }
 }
-</style>
+
+.not_loader {
+  border: solid 1px;
+  border-radius: 50%;
+  background-image: url("");
+}
+</style>

src/components/Search/TracksGrid.vue

@@ -4,11 +4,10 @@
     <div class="items">
       <table>
         <tbody>
-          <SongItem
-            v-for="(track, index) in props.tracks"
+          <TrackItem
+            v-for="track in props.tracks"
             :key="track"
-            :song="track"
-            :index="index + 1"
+            :track="track"
           />
         </tbody>
       </table>
@@ -18,8 +17,8 @@
 </template>
 
 <script setup>
-import SongItem from "@/components/shared/SongItem.vue";
 import LoadMore from "./LoadMore.vue";
+import TrackItem from "../shared/TrackItem.vue";
 
 const props = defineProps({
   tracks: {

src/components/shared/TrackItem.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    class="track-item h-1"
+    @click="playThis(props.track)"
+    :class="{
+      currentInQueue: current.id == props.track.id,
+    }"
+  >
+    <div
+      class="album-art image"
+      :style="{
+        backgroundImage: `url(&quot;${props.track.image}&quot;)`,
+      }"
+    >
+      <div
+        class="now-playing-track image"
+        v-if="current.id == props.track.id"
+        :class="{ active: is_playing, not_active: !is_playing }"
+      ></div>
+    </div>
+    <div class="tags">
+      <div class="title ellip">{{ props.track.title }}</div>
+      <hr />
+      <div class="artist ellip">
+        <span v-for="artist in putCommas(props.track.artists)" :key="artist">{{
+          artist
+        }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import perks from "../../composables/perks";
+import playAudio from "../../composables/playAudio";
+
+const props = defineProps({
+  track: Object,
+});
+
+const current = ref(perks.current);
+const putCommas = perks.putCommas;
+const is_playing = ref(playAudio.playing);
+
+const playThis = (song) => {
+  playAudio.playAudio(song.filepath);
+  perks.current.value = song;
+};
+
+</script>
+
+<style lang="scss">
+.track-item {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+
+  &:hover {
+    cursor: pointer;
+    background-color: $blue;
+  }
+
+  hr {
+    border: none;
+    margin: 0.1rem;
+  }
+
+  .album-art {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 3rem;
+    height: 3rem;
+    margin: 0 0.5rem 0 0;
+    border-radius: 0.5rem;
+    background-image: url(../../assets/images/null.webp);
+  }
+  .artist {
+    width: 20rem;
+    font-size: small;
+    color: rgba(255, 255, 255, 0.637);
+  }
+}
+</style>