63 lines
1.2 KiB
Vue
63 lines
1.2 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" @click.native.stop="openSidebar('profile')" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import UserWidget from '@/components/UserWidget';
|
|
|
|
import me from '@/mixins/me';
|
|
import openSidebar from '@/mixins/open-sidebar';
|
|
|
|
const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
|
|
const Hamburger = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Hamburger');
|
|
|
|
export default {
|
|
mixins: [me, openSidebar],
|
|
|
|
components: {
|
|
Logo,
|
|
Hamburger,
|
|
UserWidget,
|
|
},
|
|
|
|
methods: {
|
|
showMobileNavigation() {
|
|
this.$store.dispatch('showMobileNavigation', true);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~styles/helpers';
|
|
|
|
.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>
|