добавлен фокус на выбранной страницее в sidebar

src/components/ButtonSidebarComponent.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   a(:href="path")
-    div(class='button-icon-item')
+    button(:id="id" class='button-icon-item')
       basic-icon(icon-color="#252850" width="40" height="40" )
         slot
 </template>
@@ -10,7 +10,16 @@
   export default {
     name: "ButtonSidebar",
     components: {BasicIcon},
-    props: ['path']
+    props: {
+      path: String,
+      id: String,
+      changeStyle: Function
+    },
+    data(){
+      return {
+        selectedStyle: false
+      }
+    }
   }
 </script>
 
@@ -19,10 +28,19 @@
     width: fit-content
     padding: 12px 16px 12px 12px
     cursor: pointer
+    background-color: rgb(65, 105, 225, 0)
     border-radius: 0 4px 4px 0
     border-left-color: rgb(65, 105, 225, 0)
     border-left-width: 4px
+    border-right: none
+    border-top: none
+    border-bottom: none
     border-left-style: solid
+  .button-icon-item:focus
+    background-color: rgb(65, 105, 225, 0.3)
+    border-left-color: rgb(65, 105, 225, 1)
+    path
+      fill: #4169E1
   .button-icon-item:hover
     background-color: rgb(65, 105, 225, 0.3)
     border-left-color: rgb(65, 105, 225, 1)

src/components/homePageComponents/SidebarComponent.vue

@@ -1,14 +1,14 @@
 <template lang="pug">
   div(class='sidebar-container')
     div(class='top-button-container')
-      button-sidebar-component(path="#/")
+      button-sidebar-component(id="home" path="#/")
         home-icon
-      button-sidebar-component(path="#/calendar")
+      button-sidebar-component(id="calendar" path="#/calendar")
         calendar-icon
-      button-sidebar-component(path="#/user")
+      button-sidebar-component(id="user" path="#/user")
         user-icon
     div(class="bottom-button-container")
-      button-sidebar-component(path="#/settings")
+      button-sidebar-component(id="settings" path="#/settings")
         settings-icon
 </template>
 
@@ -22,11 +22,6 @@
   export default {
     name: "SidebarComponent",
     components: {ButtonSidebarComponent, HomeIcon, CalendarIcon, UserIcon, SettingsIcon},
-    data() {
-      return {
-        selectedPages: '',
-      }
-    }
   }
 </script>
 
@@ -36,7 +31,7 @@
     flex-direction: column
     justify-content: space-between
     flex: auto
-    padding: 24px 0px 24px 0px
+    padding: 24px 0 24px 0
     box-sizing: border-box
     max-width: 80px
     background-color: #F8F8FF