animate right sidebar cards collapse

src/assets/css/global.scss

@@ -126,6 +126,12 @@ a {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+  transition: transform 0.3s ease-in-out;
+}
+
+.image:hover {
+  transform: matrix(1.1, 0, 0, 1.1, 0, 0);
+  transition: transform 0.3s ease-in-out;
 }
 
 .ellipsis {

src/components/FolderView/SongList.vue

@@ -110,6 +110,9 @@ th {
   padding: 8px;
 }
 
+th {
+  height: 2em;
+}
 tr:nth-child(even) {
   background-color: rgba(29, 29, 29, 0.767);
 }

src/components/PlaylistView/Header.vue

@@ -134,7 +134,6 @@
   background-color: $blue;
   border-radius: $small;
   transition: transform 0.5s;
-  transform: scale(1.1);
 }
 
 .p-header .info .albums .first {

src/components/RightSideBar/Search.vue

@@ -6,7 +6,7 @@
       placeholder="Michael Jackson"
       v-model="query"
     />
-    <div class="scrollable" :class="{ hidden: !is_hidden }">
+    <div class="scrollable" :class="{ v0: !is_hidden, v1: 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">
@@ -54,7 +54,7 @@
 
 <script>
 import { ref, toRefs } from "@vue/reactivity";
-import { watch } from '@vue/runtime-core';
+import { watch } from "@vue/runtime-core";
 
 export default {
   props: ["search"],
@@ -85,8 +85,7 @@ export default {
     watch(query, (new_query) => {
       if (new_query.length > 0) {
         emit("expandSearch");
-      }
-      else {
+      } else {
         emit("collapseSearch");
       }
     });
@@ -97,6 +96,16 @@ export default {
 </script>
 
 <style>
+.right-search .v0 {
+  max-height: 0em;
+  transition: max-height 0.5s ease;
+}
+
+.right-search .v1 {
+  max-height: 26rem;
+  transition: max-height 0.5s ease;
+}
+
 .right-search {
   position: relative;
   border-radius: 1rem;
@@ -146,8 +155,10 @@ export default {
   font-size: 1rem;
   line-height: 3rem;
   outline: none;
+  transition: all 0.5s ease;
 }
 .right-search input:focus {
+  transition: all 0.5s ease;
   color: rgb(255, 255, 255);
   outline: 0.1rem solid #fafafa52;
 }

src/components/RightSideBar/UpNext.vue

@@ -11,14 +11,16 @@
         <p class="artist">Sam hunt</p>
       </div>
     </div>
-    <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>
-          <div class="tags">
-            <p class="title">{{ song.title }}</p>
-            <hr />
-            <p class="artist">{{ song.artist }}</p>
+    <div :class="{ v0: !is_expanded, v1: is_expanded }">
+      <div class="all-items">
+        <div class="scrollable">
+          <div class="song-item h-1" v-for="song in songs" :key="song">
+            <div class="album-art image"></div>
+            <div class="tags">
+              <p class="title">{{ song.title }}</p>
+              <hr />
+              <p class="artist">{{ song.artist }}</p>
+            </div>
           </div>
         </div>
       </div>
@@ -123,7 +125,19 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
+.up-next .v0 {
+  max-height: 0em;
+  overflow: hidden;
+  transition: max-height 0.5s ease;
+}
+
+.up-next .v1 {
+  max-height: 23em;
+  border-top: 1px solid var(--seperator);
+  transition: max-height 0.5s ease;
+}
+
 .up-next {
   padding: 0.5rem;
   margin-top: 1rem;
@@ -185,14 +199,12 @@ export default {
 }
 
 .up-next .all-items {
-  border-top: 1px solid var(--seperator);
+  padding-top: $small;
 }
 
 .up-next .all-items .scrollable {
   height: 20rem;
-  overflow-y: scroll;
-  padding: 0.5rem;
-  margin-top: 0.5rem;
+  overflow-y: auto;
   background-color: rgba(2, 6, 14, 0.425);
   border-radius: 0.5rem;
 }