make right sidebar props reactive

change favicons

src/App.vue

@@ -5,7 +5,7 @@
       <div id="logo-container">
         <div id="toggle" @click="toggleNav"></div>
         <router-link :to="{ name: 'FolderView' }" v-if="!collapsed"
-          ><div ref="logo" class="logo"></div
+          ><div class="logo"></div
         ></router-link>
       </div>
       <Navigation :collapsed="collapsed" />
@@ -21,11 +21,15 @@
       <router-view />
     </div>
     <div class="r-sidebar">
-      <Search />
+      <Search
+        v-model:search="search"
+        @expandSearch="expandSearch"
+        @collapseSearch="collapseSearch"
+      />
       <div class="m-np">
         <NowPlaying />
       </div>
-      <UpNext v-model:up_next="up_next" @updateCollapser="updateCollapser" :key="componentKey"/>
+      <UpNext v-model:up_next="up_next" @expandQueue="expandQueue" />
       <RecommendedArtist />
     </div>
   </div>
@@ -55,21 +59,36 @@ export default {
   setup() {
     const collapsed = ref(true);
 
-    const logo = ref(null);
-
     function toggleNav() {
       collapsed.value = !collapsed.value;
     }
 
-    let up_next = ref(true);
-    const componentKey = ref(0);
+    let up_next = ref(false);
+    let search = ref(false);
 
-    const updateCollapser = () => {
-      up_next.value = !up_next.value
-      componentKey.value +=1;
+    const expandQueue = () => {
+      up_next.value = !up_next.value;
+      search.value = false;
     };
 
-    return { logo, toggleNav, collapsed, up_next, updateCollapser, componentKey };
+    const expandSearch = () => {
+      search.value = true;
+      up_next.value = false;
+    };
+
+    const collapseSearch = () => {
+      search.value = false;
+    };
+
+    return {
+      toggleNav,
+      collapsed,
+      up_next,
+      expandQueue,
+      expandSearch,
+      collapseSearch,
+      search,
+    };
   },
 };
 </script>
@@ -160,7 +179,7 @@ export default {
 }
 .r-sidebar {
   position: relative;
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
 }
 .m-np {
   position: absolute;

src/assets/icons/logo-small-white-bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="375" viewBox="0 0 375 375" height="375" version="1.0"><defs><clipPath id="a"><path d="M 73.445312 66 L 301 66 L 301 308.839844 L 73.445312 308.839844 Z M 73.445312 66"/></clipPath></defs><path fill="#FFF" d="M 187.5 0 C 83.945312 0 0 83.945312 0 187.5 C 0 291.054688 83.945312 375 187.5 375 C 291.054688 375 375 291.054688 375 187.5 C 375 83.945312 291.054688 0 187.5 0 Z M 187.5 0"/><g clip-path="url(#a)"><path fill="#4AD168" d="M 88.226562 152.753906 C 78.492188 138.632812 73.621094 118.523438 73.621094 92.417969 L 73.621094 66.613281 L 143.804688 66.613281 L 276.328125 211.664062 C 283.808594 219.96875 288.796875 226.96875 291.289062 232.664062 C 293.785156 238.359375 295.625 243.578125 296.8125 248.324219 C 299.425781 257.816406 300.730469 269.503906 300.730469 283.386719 L 300.730469 308.835938 L 232.507812 308.835938 L 88.761719 152.753906 Z M 223.601562 142.609375 C 223.601562 109.980469 228.648438 88.742188 238.742188 78.894531 C 244.085938 73.671875 251.035156 70.351562 259.585938 68.925781 C 268.253906 67.382812 278.761719 66.613281 291.113281 66.613281 L 300.730469 66.613281 L 300.730469 94.734375 C 300.730469 120.003906 294.082031 136.914062 280.78125 145.457031 C 271.28125 151.625 255.308594 154.710938 232.867188 154.710938 L 223.601562 154.710938 Z M 73.621094 281.074219 C 73.621094 255.800781 80.273438 238.832031 93.570312 230.171875 C 103.070312 224.121094 119.042969 221.09375 141.488281 221.09375 L 150.75 221.09375 L 150.75 233.199219 C 150.75 266.183594 145.703125 287.363281 135.609375 296.734375 C 128.722656 303.140625 118.6875 306.9375 105.507812 308.125 C 98.855469 308.601562 91.433594 308.835938 83.242188 308.835938 L 73.621094 308.835938 Z M 73.621094 281.074219"/></g></svg>

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>