refactor UI layout

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>