<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>
