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