Изменены стили компонентов sidebar и base-компонентов под использование сетки

src/components/TheSidebar.vue

@@ -1,13 +1,13 @@
 <template lang="pug">
-  .sidebar-container
-    .top-button-container
+  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border
+    .flex.flex-col.gap-y-6
       the-button-sidebar(id="home" path="#/")
         .icon-home
       the-button-sidebar(id="calendar" path="#/calendar")
         .icon-calendar-2
       the-button-sidebar(id="user" path="#/user")
         .icon-person-2
-    .bottom-button-container
+    .flex.text-4xl.flex-col.gap-y-6
       the-button-sidebar(id="settings" path="#/settings")
         .icon-settings
 </template>
@@ -22,21 +22,7 @@
 </script>
 
 <style lang="sass" scoped>
-  #person
-    font-style: normal
-  .sidebar-container
-    display: flex
-    flex-direction: column
-    justify-content: space-between
-    flex: auto
-    padding: 24px 0 24px 0
-    box-sizing: border-box
+  .sidebar
     max-width: 80px
     background-color: #F8F8FF
-
-  .top-button-container
-    display: flex
-    font-size: 40px
-    flex-direction: column
-    row-gap: 24px
 </style>