Исправила инпуты в header

src/components/TheHeader.vue

@@ -1,17 +1,12 @@
 <template lang="pug">
-  .header-wrapper
-    .header-left-side
+  div.header-wrapper
+    div.header-left-side
       img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
-    .header-right-side
-      .header-inputs-wrapper
-        img.search-icon(src="@/assets/icons/search.svg" alt="Search")
-        select.header-inputs.select(v-model="selectedFilter")
-          option(v-for="filter in filters" :key="filter" :value="filter") {{ filter }}
-        span.header-inputs-separator
-        input.header-inputs.search-input(placeholder="Искать ...")
+    div.header-right-side
+      header-inputs
       button.header-buttons.btn-notification
         img.bell-icon(src="@/assets/icons/bell.svg" alt="Notifications")
-      .avatar-wrapper
+      div.avatar-wrapper
         img.avatar-img(:src="avatarSrc")
         button.header-buttons.btn-down-arrow
           img.arrow-icon(src="@/assets/icons/down-arrow-2.svg" alt="Down Arrow")
@@ -19,12 +14,12 @@
 
 <script>
   import img from '@/assets/images/avatar.svg'
+  import HeaderInputs from './HeaderInputs.vue'
   export default {
-    name: 'HeaderComponent',
+    name: 'TheHeader',
+    components: {HeaderInputs},
     data() {
       return {
-        selectedFilter: 'Календарь',
-        filters: ['Календарь', 'Вариант 2', 'Вариант 3'],
         avatarSrc: img
       }
     }
@@ -33,7 +28,7 @@
 
 <style lang='sass' scoped>
   input
-    padding: 0
+    padding: 0 
 
   .header-buttons
     outline: none
@@ -51,6 +46,8 @@
     padding: 8px 24px
     background-color: var(--bg-white-color)
     box-sizing: border-box
+    position: relative
+    z-index: 2
 
   .header-right-side
     display: flex
@@ -59,31 +56,17 @@
   .header-left-side
     box-sizing: border-box
     margin: 4px 0
-    height: 32px
+    height: 32px 
     cursor: pointer
 
   .logo-img
     height: 32px
-    width: 70px
-
-  .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
-
-  .search-icon
-    position: absolute
-    height: 24px
-    width: 24px
-    color: var(--btn-blue-color)
-    opacity: 0.7
+    width: 70px 
 
   .btn-notification
     display: flex
     justify-content: center
-    align-items: center
+    align-items: center  
     margin-right: 32px
 
   .arrow-icon
@@ -94,47 +77,6 @@
     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-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%
-
   .avatar-wrapper
     display: flex
     flex-direction: row
@@ -150,4 +92,4 @@
     width: 32px
     height: 32px
     margin-right: 8px
-</style>
+</style>