<template>
  <header class="header-bar">
    <content-navigation></content-navigation>
    <router-link to="/" class="header-bar__logo" data-cy="home-link">
      <logo class="header-bar__logo-icon"></logo>
    </router-link>
    <div class="user-header">
      <a class="user-header__sidebar-link" @click="openSidebar()">
        <current-class class="user-header__current-class"/>
      </a>

      <user-widget data-cy="header-user-widget" v-bind="me"></user-widget>
    </div>
    <book-navigation v-if="showSubnavigation">
    </book-navigation>
  </header>
</template>

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

  import openSidebar from '@/mixins/open-sidebar';
  import me from '@/mixins/me';

  export default {
    mixins: [openSidebar, me],

    components: {
      ContentNavigation,
      UserWidget,
      BookNavigation,
      Logo,
      CurrentClass
    },

    computed: {
      showSubnavigation() {
        return this.$route.meta.subnavigation;
      }
    },
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .header-bar {
    display: flex;
    flex-direction: row;
    @supports (display: grid) {
      display: none;

      @include desktop {
        display: grid;
      }
    }
    align-items: center;
    justify-content: space-between;
    background-color: $color-white;
    grid-auto-rows: 50px;
    width: 100%;

    @include desktop {
      grid-template-columns: 1fr 1fr 1fr;
      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;
    }

    /*
    * 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;
    }

    &__logo {
      color: #17A887;
      font-size: 36px;
      font-weight: 800;
      font-family: $sans-serif-font-family;
      display: flex;
      justify-self: center;

      /*
      * For IE10+
      */
      -ms-grid-column: 2;
      -ms-grid-row-align: center;
      -ms-grid-column-align: center;
    }

    &__logo-icon {

      width: 212px;
      height: 31px;

    }
  }

  .user-header {
    display: flex;

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

    &__sidebar-link {
      cursor: pointer;
    }
  }
</style>
