make right sidebar props reactive

change favicons

src/components/RightSideBar/Search.vue

@@ -6,7 +6,7 @@
       placeholder="Michael Jackson"
       v-model="query"
     />
-    <div class="scrollable" :class="{ hidden: !query }">
+    <div class="scrollable" :class="{ hidden: !is_hidden }">
       <div class="tracks-results">
         <h3 class="heading">TRACKS<span class="more">SEE ALL</span></h3>
         <div class="result-item" v-for="song in songs" :key="song">
@@ -53,10 +53,12 @@
 </template>
 
 <script>
-import { ref } from "@vue/reactivity";
+import { ref, toRefs } from "@vue/reactivity";
+import { watch } from '@vue/runtime-core';
+
 export default {
-  props: ["collapser"],
-  setup() {
+  props: ["search"],
+  setup(props, { emit }) {
     const songs = [
       {
         title: "Thriller",
@@ -76,9 +78,20 @@ export default {
 
     const artists = ["Michael Jackson", "Jackson 5"];
 
-    const query = ref("");
+    const query = ref(null);
 
-    return { songs, albums, artists, query };
+    const is_hidden = toRefs(props).search;
+
+    watch(query, (new_query) => {
+      if (new_query.length > 0) {
+        emit("expandSearch");
+      }
+      else {
+        emit("collapseSearch");
+      }
+    });
+
+    return { songs, albums, artists, query, is_hidden };
   },
 };
 </script>
@@ -116,7 +129,6 @@ export default {
   right: 1rem;
   padding: 0.5rem;
   user-select: none;
-
 }
 
 .right-search .heading .more:hover {
@@ -127,7 +139,7 @@ export default {
 .right-search input {
   width: 100%;
   border: none;
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   padding-left: 1rem;
   background-color: #4645456c;
   color: rgba(255, 255, 255, 0.479);

src/components/RightSideBar/UpNext.vue

@@ -11,7 +11,7 @@
         <p class="artist">Sam hunt</p>
       </div>
     </div>
-    <div class="all-items" v-if="!toggle">
+    <div class="all-items" v-if="is_expanded">
       <div class="scrollable">
         <div class="song-item h-1" v-for="song in songs" :key="song">
           <div class="album-art image"></div>
@@ -27,12 +27,12 @@
 </template>
 
 <script>
-import { ref } from "@vue/reactivity";
+import { toRefs } from "@vue/reactivity";
 
 export default {
   props: ["up_next"],
-  emits: ["updateCollapser"],
-  setup(props, context) {
+  emits: ["expandQueue"],
+  setup(props, { emit }) {
     const songs = [
       {
         title: "Hard to forget",
@@ -112,13 +112,13 @@ export default {
       },
     ];
 
-    const toggle = ref(props.up_next);
+    const is_expanded = toRefs(props).up_next;
 
     let collapse = () => {
-      context.emit("updateCollapser");
+      emit("expandQueue");
     };
 
-    return { songs, collapse, toggle };
+    return { songs, collapse, is_expanded };
   },
 };
 </script>
@@ -230,4 +230,4 @@ export default {
   font-size: small;
   color: rgba(255, 255, 255, 0.637);
 }
-</style>
+</style>