remove transition group from queue track list

src/components/RightSideBar/Main.vue

@@ -7,13 +7,13 @@
   >
     <div class="grid">
       <div class="r-content">
-        <div class="r-dash" v-show="tabs.current === tabs.tabs.home">
+        <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
           <DashBoard />
         </div>
-        <div class="r-search" v-show="tabs.current === tabs.tabs.search">
+        <div class="r-search" v-if="tabs.current === tabs.tabs.search">
           <Search />
         </div>
-        <div class="r-queue" v-show="tabs.current === tabs.tabs.queue">
+        <div class="r-queue" v-if="tabs.current === tabs.tabs.queue">
           <Queue />
         </div>
       </div>

src/components/RightSideBar/Queue.vue

@@ -8,18 +8,16 @@
           @mouseenter="setMouseOver(true)"
           @mouseleave="setMouseOver(false)"
         >
-          <TransitionGroup name="queuelist">
-            <TrackItem
-              v-for="(t, index) in queue.tracklist"
-              :key="index"
-              :track="t"
-              @playThis="queue.play(index)"
-              :isCurrent="index === queue.current"
-              :isPlaying="queue.playing"
-              :isQueueTrack="true"
-              :index="index"
-            />
-          </TransitionGroup>
+          <TrackItem
+            v-for="(t, index) in queue.tracklist"
+            :key="index"
+            :track="t"
+            @playThis="queue.play(index)"
+            :isCurrent="index === queue.currentindex"
+            :isPlaying="queue.playing"
+            :isQueueTrack="true"
+            :index="index"
+          />
         </div>
       </div>
     </div>
@@ -52,21 +50,6 @@ onUpdated(() => {
 </script>
 
 <style lang="scss">
-.queuelist-move, /* apply transition to moving elements */
-.queuelist-enter-active {
-  transition: all 0.5s ease-in-out;
-}
-
-.queuelist-enter-from,
-.queuelist-leave-to {
-  opacity: 0;
-}
-
-.queuelist-leave-active {
-  transition: none;
-  position: absolute;
-}
-
 .up-next {
   overflow: hidden;
   height: 100%;
@@ -80,7 +63,6 @@ onUpdated(() => {
     position: relative;
     height: 100%;
 
-
     .scrollable-r {
       height: 100%;
       overflow: hidden;