<template>
  <header class="header-bar">
    <a
      class="header-bar__sidebar-link"
      data-cy="open-sidebar-link"
      @click.stop="openSidebar('navigation')"
    >
      <hamburger class="header-bar__sidebar-icon" />
    </a>
    <content-navigation class="header-bar__content-navigation" />
    <div class="user-header">
      <a
        class="user-header__sidebar-link"
      >
        <current-class
          class="user-header__current-class"
          @click="openSidebar('profile')"
        />
      </a>

      <user-widget
        :avatar-url="me.avatarUrl"
        data-cy="header-user-widget"
        @click="openSidebar('profile')"
      />
    </div>
  </header>
</template>

<script>
  import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
  import UserWidget from '@/components/UserWidget.vue';
  import CurrentClass from '@/components/school-class/CurrentClass';

  import openSidebar from '@/mixins/open-sidebar';
  import me from '@/mixins/me';
  import {defineAsyncComponent} from 'vue';

  const Hamburger = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger'));

  export default {
    mixins: [openSidebar, me],

    components: {
      ContentNavigation,
      UserWidget,
      CurrentClass,
      Hamburger,
    },
  };
</script>

<style scoped lang="scss">
  @import "~styles/helpers";

  .header-bar {
    display: flex;
    flex-direction: row;
    @supports (display: grid) {
      display: grid;
    }
    align-items: center;
    justify-content: space-between;
    background-color: $color-white;
    grid-auto-rows: 50px;
    width: 100%;
    max-width: 100vw;

    grid-template-columns: 1fr 1fr 1fr;

    @include desktop {
      grid-template-columns: 50px 1fr auto;
      grid-template-rows: 50px;
      grid-auto-rows: auto;
    }

    /*
     * For IE10+
     */
    -ms-grid-columns: 1fr 1fr 1fr;
    -ms-grid-rows: 50px 50px;

    /*
    * For IE10+
    */
    & > :nth-child(1) {
      -ms-grid-column: 1;
      -ms-grid-row-align: center;
    }

    &__content-navigation {
      grid-column: 2;
      justify-content: space-between;
    }

    &__sidebar-link {
      padding: $small-spacing;
      cursor: pointer;
    }

    &__sidebar-icon {
      width: 30px;
      height: 30px;
    }

    /*
    * For IE10+
    */
    & > :nth-child(3) {
      -ms-grid-column: 3;
      -ms-grid-row-align: center;
      -ms-grid-column-align: end;

      justify-self: end;
    }

    & > :nth-child(4) {
      -ms-grid-row: 2;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
    }
  }

  .user-header {
    display: flex;

    &__current-class {
      margin-right: $large-spacing;
    }

    &__sidebar-link {
      cursor: pointer;
      display: none;

      @include desktop {
        display: flex;
      }
    }
  }
</style>
