From 9ddd274333198e38a10128bceabb622b8b90dd2b Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 4 Oct 2022 20:10:17 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=20=D0=BD=D0=B5=D0=B9=D0=BC=D0=B8=D0=BD=D0=B3=20?=
 =?UTF-8?q?=D0=BA=D0=BB=D0=B0=D1=81=D1=81=D0=BE=D0=B2=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../homePageComponents/HeaderComponent.vue    | 247 +++++++++---------
 1 file changed, 126 insertions(+), 121 deletions(-)

diff --git a/src/components/homePageComponents/HeaderComponent.vue b/src/components/homePageComponents/HeaderComponent.vue
index 904a036..fee3a28 100644
--- a/src/components/homePageComponents/HeaderComponent.vue
+++ b/src/components/homePageComponents/HeaderComponent.vue
@@ -1,149 +1,154 @@
 <template lang="pug">
-  div.header-wrapper.flex.flex-row.center.space-between
-    div.logo-wrapper
+  div.header-wrapper
+    div.header-left-side
       img.logo-img(src="../../assets/images/logo.svg" alt="Logo")
-    div.flex.flex-row
-      div.inputs-wrapper
+    div.header-right-side
+      div.header-inputs-wrapper
         img.search-icon(src="../../assets/icons/search.svg" alt="Search")
-        select.inputs.select(v-model="selectedFilter")
+        select.header-inputs.select(v-model="selectedFilter")
           option(v-for="filter in filters" :key="filter" :value="filter") {{ filter }}
-        span.separator  
-        input.inputs.search-input(placeholder="Искать ...")
-      button.flex.center.btn-notification
+        span.header-inputs-separator  
+        input.header-inputs.search-input(placeholder="Искать ...")
+      button.header-buttons.btn-notification
         img.bell-icon(src="../../assets/icons/bell.svg" alt="Notifications")
-      div.flex.flex-row.center
+      div.avatar-wrapper
         img.avatar-img(:src="avatarSrc")
-        button.flex.flex-center
+        button.header-buttons.btn-down-arrow
           img.arrow-icon(src="../../assets/icons/down-arrow-2.svg" alt="Down Arrow")
 </template>
 
 <script>
-import img from '../../assets/images/avatar.svg'
-export default {
-  name: 'HeaderComponent',
-  data() {
-    return {
-      selectedFilter: 'Календарь',
-      filters: ['Календарь', 'Вариант 2', 'Вариант 3'],
-      avatarSrc: img
+  import img from '../../assets/images/avatar.svg'
+  export default {
+    name: 'HeaderComponent',
+    data() {
+      return {
+        selectedFilter: 'Календарь',
+        filters: ['Календарь', 'Вариант 2', 'Вариант 3'],
+        avatarSrc: img
+      }
     }
   }
-}
 </script>
 
 <style lang='sass'>
+  input
+    padding: 0 
 
-input
-  padding: 0 
+  .header-buttons
+    outline: none
+    border: none
+    background-color: transparent
+    cursor: pointer
+    padding: 0
+    color: var(--font-dark-blue-color)
 
-button
-  outline: none
-  border: none
-  background-color: transparent
-  cursor: pointer
-  padding: 0
-  color: var(--font-dark-blue-color)
+  .header-wrapper
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    width: 100%
+    padding: 8px 24px
+    background-color: var(--bg-white-color)
+    box-sizing: border-box
 
-.header-wrapper
-  width: 100%
-  padding: 8px 24px
-  background-color: var(--bg-white-color)
-  box-sizing: border-box
+  .header-right-side
+    display: flex
+    flex-direction: row
 
-.flex
-  display: flex
+  .header-left-side
+    box-sizing: border-box
+    margin: 4px 0
+    height: 32px 
+    cursor: pointer
 
-.flex-row    
-  flex-direction: row
+  .logo-img
+    height: 32px
+    width: 70px 
 
-.center
-  justify-content: center
-  align-items: center  
+  .header-inputs-wrapper
+    display: inline-block
+    background-color: rgba(65, 105, 225, 0.1)
+    padding: 8px 18px 8px 16px
+    border-radius: 4px
+    margin-right: 46px
 
-.space-between    
-  justify-content: space-between
-
-.logo-wrapper
-  box-sizing: border-box
-  margin: 4px 0
-  height: 32px 
-  cursor: pointer
-
-.logo-img
-  height: 32px
-  width: 70px 
-
-.inputs-wrapper
-  display: inline-block
-  background-color: rgba(65, 105, 225, 0.1)
-  padding: 8px 18px 8px 16px
-  border-radius: 4px
-  margin-right: 46px
-
-.search-icon
-  position: absolute
-  height: 24px
-  width: 24px
-  color: var(--btn-blue-color)
-  opacity: 0.7 
-
-.btn-notification
-  margin-right: 32px
-
-.arrow-icon
-  width: 24px
-  height: 24px
-
-.bell-icon
-  width: 24px
-  height: 24px
-
-.inputs
-  cursor: pointer
-  border: none
-  outline: none
-  background-color: transparent
-  color: var(--btn-blue-color)
-  height: 100%
-  box-sizing: border-box
-  font-family: Raleway
-  font-style: normal
-  font-weight: 500
-  font-size: 16px
-  line-height: 19px
-  font-feature-settings: 'pnum' on, 'lnum' on
-  display: inline-block
-  vertical-align: middle
-  &::placeholder
+  .search-icon
+    position: absolute
+    height: 24px
+    width: 24px
     color: var(--btn-blue-color)
+    opacity: 0.7 
+
+  .btn-notification
+    display: flex
+    justify-content: center
+    align-items: center  
+    margin-right: 32px
+
+  .arrow-icon
+    width: 24px
+    height: 24px
+
+  .bell-icon
+    width: 24px
+    height: 24px
+
+  .header-inputs
+    cursor: pointer
+    border: none
+    outline: none
+    background-color: transparent
+    color: var(--btn-blue-color)
+    height: 100%
+    box-sizing: border-box
+    font-family: Raleway
+    font-style: normal
+    font-weight: 500
+    font-size: 16px
+    line-height: 19px
+    font-feature-settings: 'pnum' on, 'lnum' on
+    display: inline-block
+    vertical-align: middle
+    &::placeholder
+      color: var(--btn-blue-color)
+      opacity: 0.5
+
+  .select
+    -webkit-appearance: none
+    -moz-appearance: none
+    -ms-appearance: none
+    appearance: none
+    background: url(../../assets/icons/down-arrow-1.svg) no-repeat right top 4px
+    overflow: hidden
+    margin-right: 16px
+    padding: 2px 20px 2px 30px
+
+  .search-input
+    margin-left: 14px
+    padding: 2px
+
+  .header-inputs-separator
+    display: inline-block
+    vertical-align: middle
+    border-left: 1px solid var(--btn-blue-color)
     opacity: 0.5
+    border-radius: 4px
+    height: 100%
 
-.select
-  -webkit-appearance: none
-  -moz-appearance: none
-  -ms-appearance: none
-  appearance: none
-  background: url(../../assets/icons/down-arrow-1.svg) no-repeat right top 4px
-  overflow: hidden
-  margin-right: 16px
-  padding: 2px 20px 2px 30px
+  .avatar-wrapper
+    display: flex
+    flex-direction: row
+    justify-content: center
+    align-items: center
 
-.search-input
-  margin-left: 14px
-  padding: 2px
-
-.separator
-  display: inline-block
-  vertical-align: middle
-  height: 254px
-  border-left: 1px solid var(--btn-blue-color)
-  opacity: 0.5
-  border-radius: 4px
-  height: 100%
-
-.avatar-img
-  width: 32px
-  height: 32px
-  margin-right: 8px
+  .btn-down-arrow
+    display: flex
+    justify-content: center
+    align-items: center
 
+  .avatar-img
+    width: 32px
+    height: 32px
+    margin-right: 8px
 </style>