64 lines
1.1 KiB
Vue
64 lines
1.1 KiB
Vue
<template>
|
|
<div class="mobile-header">
|
|
<a @click="showMobileNavigation">
|
|
<hamburger class="mobile-header__hamburger"/>
|
|
</a>
|
|
|
|
<router-link
|
|
to="/"
|
|
data-cy="mobile-home-link">
|
|
<logo/>
|
|
</router-link>
|
|
|
|
<user-widget v-bind="me"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Logo from '@/components/icons/Logo';
|
|
import Hamburger from '@/components/icons/Hamburger';
|
|
import UserWidget from '@/components/UserWidget';
|
|
|
|
import me from '@/mixins/me';
|
|
|
|
export default {
|
|
mixins: [me],
|
|
|
|
components: {
|
|
Logo,
|
|
Hamburger,
|
|
UserWidget
|
|
},
|
|
|
|
methods: {
|
|
showMobileNavigation() {
|
|
this.$store.dispatch('showMobileNavigation', true);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.mobile-header {
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
display: flex;
|
|
|
|
@include desktop {
|
|
display: none;
|
|
}
|
|
|
|
padding: 0 $medium-spacing;
|
|
|
|
&__hamburger {
|
|
width: 30px;
|
|
height: 30px;
|
|
fill: $color-silver-dark;
|
|
}
|
|
}
|
|
</style>
|