WIP Изменила сайдбар приложения

src/components/LoggedInLayout.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.w-full.h-full.gap-y-2
+  .flex.flex-col.w-full.h-full.gap-y-2.pb-2
     the-header(
       :url="url",
       :is-open-form="isOpenForm",
@@ -61,5 +61,5 @@ export default {
 </script>
 <style lang="sass" scoped>
 .page-wrapper
-  height: calc(100vh - 56px - 8px)
+  height: calc(100vh - 56px - 16px)
 </style>

src/components/TheSidebar.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border(:style="bordersStyle")
-    .flex.flex-col.gap-y-6
+  .sidebar.flex.flex-col.justify-between.flex-auto.pt-4.px-2.pb-7.rounded
+    .flex.flex-col.gap-y-4
       base-button-sidebar(
         v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
         :path="button.path",
@@ -8,7 +8,7 @@
         :active="button.active",
         :change-style-page="changeStylePage"
       )
-        q-icon(:name="`app:${button.icon}`", size="36px")
+        q-icon(:name="`app:${button.icon}`", size="25px")
     .flex.text-4xl.flex-col.gap-y-6
       base-button-sidebar(
         :path="getSettings.path",
@@ -16,7 +16,7 @@
         :active="getSettings.active",
         :change-style-page="changeStylePage"
       )
-        q-icon(:name="`app:${getSettings.icon}`", size="36px")
+        q-icon(:name="`app:${getSettings.icon}`", size="25px")
 </template>
 
 <script>
@@ -63,12 +63,6 @@ export default {
     getSettings() {
       return this.pageSettings.find((el) => el.id === "settings");
     },
-    bordersStyle() {
-      return {
-        "border-top-right-radius": this.currentPageBorder ? "0px" : "4px",
-        //"border-bottom-right-radius": this.currentPageBorder ? "0px" : "4px",
-      };
-    },
   },
   mounted() {
     let href = window.location.href.slice(22);
@@ -93,7 +87,7 @@ export default {
 
 <style lang="sass" scoped>
 .sidebar
-  max-width: 80px
-  min-width: 80px
+  max-width: 64px
+  min-width: 64px
   background-color: var(--default-white)
 </style>

src/components/base/BaseSidebarButton.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
   q-btn(
-    padding="14px 14px 14px 10px",
-    style="width: 76px"
+    style="width: 48px; height: 48px"
     :class="checkActive",
     :href="path",
     :id="id",
     @click="(e) => changeStylePage(e)"
+    rounded
   )
     slot
 </template>
@@ -35,14 +35,10 @@ export default {
 <style lang="sass" scoped>
 .button
   background-color: trnsparent
-  border-radius: 0 4px 4px 0
-  border-left: 4px solid transparent
 .active
   background-color: var(--btn-blue-color-1)
-  border-left-color: var(--btn-blue-color)
   color: var(--btn-blue-color)
 .button:hover
   background-color: var(--btn-blue-color-1)
-  border-left-color: var(--btn-blue-color)
   color: var(--btn-blue-color)
 </style>