refactor UI layout

src/components/AlbumView/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="album-h">
-    <div class="a-header rounded">
+    <div class="a-header">
       <div
         class="image art shadow-lg"
         :style="{ backgroundImage: `url(&quot;${encodeURI(props.album_info.image)}&quot;)` }"
@@ -64,16 +64,14 @@ function playAlbum() {
   padding: 1rem;
   height: 100%;
   background-image: linear-gradient(
-    56deg,
-    $gray 0%,
-    $gray4 25%,
-    $gray1 50%,
-    $gray1 75%,
-    $gray 100%
+    to bottom,
+    $gray3 0%,
+    $gray3 25%,
+    $gray3 35%,
+    $gray4 50%,
+    $gray 75%,
+    $black 100%
   );
-  background-position: 0% 60%;
-  background-repeat: no-repeat;
-  background-size: cover;
 
   .art {
     position: absolute;

src/components/BottomBar/BottomBar.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="b-bar">
-    <div class="grid">
-      <SongCard :collapsed="props.collapsed" />
+  <div class="b-bar ">
+    <div class="grid rounded">
       <div class="controlsx rounded">
         <div class="controls controls-bottom">
           <HotKeys />
@@ -27,7 +26,6 @@
 
 <script setup>
 import "../../assets/css/BottomBar/BottomBar.scss";
-import SongCard from "./SongCard.vue";
 import Progress from "../shared/Progress.vue";
 import HotKeys from "../shared/HotKeys.vue";
 import state from "../../composables/state";
@@ -37,10 +35,4 @@ import playAudio from "../../composables/playAudio";
 const current_pos = playAudio.current_time
 const formatSeconds = perks.formatSeconds;
 
-const props = defineProps({
-  collapsed: {
-    type: Boolean,
-    default: false,
-  },
-});
 </script>

src/components/LeftSidebar/AlbumArt.vue

@@ -1,17 +1,20 @@
 <template>
-  <div class="l_" v-if="!props.collapsed">
+  <div class="l_ rounded" v-if="!props.collapsed">
     <div
-      class="l-image image"
+      class="l-image image rounded"
       :style="{
         backgroundImage: `url(&quot;${current.image}&quot;)`,
       }"
     ></div>
+    <div class="separator no-border"></div>
+    <SongCard />
   </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import state from "../../composables/state";
+import SongCard from "./SongCard.vue";
 
 const current = ref(state.current);
 const props = defineProps({
@@ -24,10 +27,12 @@ const props = defineProps({
 <style lang="scss">
 .l_ {
   padding: $small;
+  background-color: #e24a01;
+  margin: $small;
 
   .l-image {
-    height: 14rem;
-    width: 14rem;
+    height: 13rem;
+    width: 13rem;
   }
 }
 </style>

src/components/RightSideBar/Main.vue

@@ -2,70 +2,45 @@
   <div class="r-sidebar">
     <div class="grid">
       <div class="r-content">
-        <div class="r-dash" v-show="current_tab === tabs.home">
+        <div class="r-dash" v-show="tabs.current === tabs.tabs.home">
           <DashBoard />
         </div>
-        <div class="r-search" v-show="current_tab === tabs.search">
+        <div class="r-search" v-show="tabs.current === tabs.tabs.search">
           <Search />
         </div>
 
-        <div class="r-queue" v-show="current_tab === tabs.queue">
+        <div class="r-queue" v-show="tabs.current === tabs.tabs.queue">
           <UpNext />
         </div>
       </div>
-      <div class="tab-keys">
-        <Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" />
-      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
 import Search from "./Search.vue";
 import UpNext from "./Queue.vue";
-import Tabs from "./Tabs.vue";
 import Main from "./Home/Main.vue";
-import perks from "../../composables/perks";
+import useTabStore from "../../stores/tabs";
 
 const DashBoard = Main;
-
-const tabs = {
-  home: "home",
-  search: "search",
-  queue: "queue",
-};
-
-const default_tab = tabs.home;
-
-const current_tab = ref(default_tab);
-
-function changeTab(tab) {
-  new Promise((resolve) => {
-    current_tab.value = tab;
-    resolve();
-    setTimeout(() => {}, 300);
-  }).then(() => {
-    if (tab === tabs.queue) {
-      setTimeout(() => {
-        perks.focusCurrent();
-      }, 300);
-    }
-  });
-}
+const tabs = useTabStore();
 </script>
 
 <style lang="scss">
 .r-sidebar {
-  width: 32em;
+  width: 29em;
+  background-color: rgba(4, 12, 34, 0.103);
+  padding: 0 0 0 $small;
+  border-left: 1px solid $gray;
 
   @include phone-only {
     display: none;
   }
 
-  // @include tablet-landscape {
-  //   width: 3rem;
-  // }
+  @include tablet-landscape {
+    display: none;
+  }
 
   .grid {
     height: 100%;
@@ -76,7 +51,6 @@ function changeTab(tab) {
       grid-area: content;
       width: 29rem;
 
-
       // @include tablet-landscape {
       //   display: none;
       // }
@@ -95,6 +69,7 @@ function changeTab(tab) {
     }
 
     .tab-keys {
+      display: none;
       width: 3rem;
       right: 0;
       height: 100%;

src/components/RightSideBar/Tabs.vue

@@ -1,47 +1,44 @@
 <template>
-  <div class="r-tabs">
-    <div v-for="tab in props.tabs"
-         @click="changeTab(tab)"
-         :key="tab"
-         class="image t-item"
-         :class="{ active_tab: props.current_tab === tab }, `${tab}`"
-    ></div>
-    <div>
+  <div class="tabs">
+    <div class="cont rounded">
+      <div
+        v-for="tab in tabs.tabs"
+        @click="tabs.changeTab(tab)"
+        :key="tab"
+        class="image t-item"
+        :class="({ active_tab: tabs.current === tab }, `${tab}`)"
+      ></div>
     </div>
   </div>
 </template>
 
 <script setup>
+import useTabStore from "../../stores/tabs";
 
-const props = defineProps({
-  current_tab: String,
-  tabs: Object,
-});
-
-const emit = defineEmits(['changeTab'])
-
-function changeTab(tab) {
-  if (tab === props.current_tab) return;
-
-  emit('changeTab', tab)
-}
-
+const tabs = useTabStore()
 </script>
 
 <style lang="scss">
-.r-tabs {
-  display: flex;
-  flex-direction: column;
-  gap: $small;
-  margin-top: $small;
-  margin-left: $small;
+.tabs {
+  padding: $small;
+  border-left: 1px solid $gray;
+
+  .cont {
+    background-color: $gray;
+    display: flex;
+    gap: $small;
+    height: 100%;
+    align-items: center;
+    padding-left: $small;
+  }
 
   .t-item {
     float: right;
-    width: 100%;
-    height: 2.45rem;
+    width: 2.25rem;
+    height: 2.25rem;
     background-size: 1.5rem;
-    border-radius: $small 0 0 $small;
+    border-radius: $small;
+    background-color: $gray4;
 
     &:hover {
       background-color: rgba(128, 128, 128, 0.281);
@@ -49,23 +46,20 @@ function changeTab(tab) {
   }
 
   .active_tab {
-    border-right: solid;
+    border: solid;
     background-color: rgba(17, 123, 223, 0.192);
   }
 
   .search {
     background-image: url("../../assets/icons/search.svg");
-    // background-color: rgba(35, 35, 66, 0.247);
   }
 
   .queue {
     background-image: url("../../assets/icons/queue.svg");
-    // background-color: rgba(46, 25, 33, 0.445);
   }
 
   .home {
     background-image: url("../../assets/icons/dashboard.svg");
-    // background-color: rgba(148, 102, 50, 0.445);
   }
 }
 </style>

src/components/nav/NavBar.vue

@@ -1,14 +1,42 @@
 <template>
-  <div class="topnav"></div>
+  <div class="topnav rounded">
+    <div class="left">
+      <div class="btn">
+        <PlayBtn />
+      </div>
+      <div class="info">
+        <div class="title">The Queen of Soul</div>
+      </div>
+    </div>
+    <div class="center"></div>
+    <div class="right"></div>
+  </div>
 </template>
 
 <script setup>
-function toggleNav() {}
+import PlayBtn from '../shared/PlayBtn.vue';
 </script>
 
 <style lang="scss">
 .topnav {
-  background-color: $gray;
+  background-color: $gray3;
   display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  padding: 0 $small;
+  margin: $small $small 0 $small;
+
+  .left {
+    display: flex;
+    // border: solid 1px $gray;
+    align-items: center;
+    gap: $small;
+
+    .info {
+      .title {
+        font-size: 1.5rem;
+        font-weight: bold;
+      }
+    }
+  }
 }
 </style>

src/components/shared/PlayBtn.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="play-btn circular">
+    <div class="icon"></div>
+  </div>
+</template>
+
+<style lang="scss">
+.play-btn {
+  width: 2rem;
+  height: 2rem;
+  background-color: $red;
+  background-image: url("../../assets/icons/play.svg");
+  background-size: 1.25rem;
+  background-position: 60%;
+  background-repeat: no-repeat;
+  transition: all .25s;
+
+  &:hover {
+      background-color: rgb(58, 197, 58);
+      transform: scale(1.1);
+  }
+}
+</style>

src/components/shared/SongItem.vue

@@ -207,7 +207,7 @@ export default {
   .song-album {
     .album {
       cursor: pointer;
-      width: max-content;
+      max-width: max-content;
     }
 
     @include tablet-portrait {