From 7a70f393ecf45448ff3d5df75ee58fb8a1fc5dd8 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Tue, 4 Oct 2022 12:18:43 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D1=84=D0=BE=D0=BA=D1=83=D1=81=20=D0=BD=D0=B0=20=D0=B2?=
 =?UTF-8?q?=D1=8B=D0=B1=D1=80=D0=B0=D0=BD=D0=BD=D0=BE=D0=B9=20=D1=81=D1=82?=
 =?UTF-8?q?=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5=D0=B5=20=D0=B2=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ButtonSidebarComponent.vue     | 22 +++++++++++++++++--
 .../homePageComponents/SidebarComponent.vue   | 15 +++++--------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/ButtonSidebarComponent.vue b/src/components/ButtonSidebarComponent.vue
index 71aadd2..c34c324 100644
--- a/src/components/ButtonSidebarComponent.vue
+++ b/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)
diff --git a/src/components/homePageComponents/SidebarComponent.vue b/src/components/homePageComponents/SidebarComponent.vue
index 8134732..e7ca147 100644
--- a/src/components/homePageComponents/SidebarComponent.vue
+++ b/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