155 lines
3.4 KiB
Vue
155 lines
3.4 KiB
Vue
<template lang="pug">
|
|
.header-wrapper
|
|
.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="Искать ...")
|
|
button.header-buttons.btn-notification
|
|
img.bell-icon(src="@/assets/icons/bell.svg" alt="Notifications")
|
|
.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")
|
|
</template>
|
|
|
|
<script>
|
|
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
|
|
|
|
.header-buttons
|
|
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-right-side
|
|
display: flex
|
|
flex-direction: row
|
|
|
|
.header-left-side
|
|
box-sizing: border-box
|
|
margin: 4px 0
|
|
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
|
|
|
|
.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%
|
|
|
|
.avatar-wrapper
|
|
display: flex
|
|
flex-direction: row
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
.btn-down-arrow
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
.avatar-img
|
|
width: 32px
|
|
height: 32px
|
|
margin-right: 8px
|
|
</style>
|