skillbox/client/src/components/book-navigation/ContentNavigation.vue

<template>
  <nav
    :class="{'content-navigation--sidebar': isSidebar}"
    class="content-navigation">
    <div class="content-navigation__primary">
      <div class="content-navigation__item">
        <router-link
          :class="{'content-navigation__link--active': isActive('book')}"
          :to="topicRoute"
          active-class="content-navigation__link--active"
          class="content-navigation__link"
          @click.native="close">Themen
        </router-link>

        <book-topic-navigation
          v-if="isSidebar"
        />

      </div>

      <div class="content-navigation__item">
        <router-link
          to="/instruments"
          active-class="content-navigation__link--active"
          class="content-navigation__link"
          @click.native="close">Instrumente
        </router-link>
      </div>

      <div class="content-navigation__item">
        <router-link
          :to="{name: 'news'}"
          active-class="content-navigation__link--active"
          class="content-navigation__link"
          @click.native="close">News
        </router-link>
      </div>
    </div>

    <router-link
      to="/"
      class="content-navigation__logo"
      data-cy="home-link"
      v-if="!isSidebar"
    >
      <logo class="content-navigation__logo-icon"/>
    </router-link>

    <div class="content-navigation__secondary">
      <div class="content-navigation__item content-navigation__item--secondary">
        <router-link
          :class="{'content-navigation__link--active': isRoomUrl()}"
          to="/rooms"
          active-class="content-navigation__link--active"
          class="content-navigation__link content-navigation__link--secondary"
          @click.native="close">Räume
        </router-link>
      </div>

      <div class="content-navigation__item content-navigation__item--secondary">
        <router-link
          to="/portfolio"
          active-class="content-navigation__link--active"
          class="content-navigation__link content-navigation__link--secondary"
          @click.native="close">Portfolio
        </router-link>
      </div>
    </div>
  </nav>
</template>

<script>
  import Logo from '@/components/icons/Logo';
  import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';

  import sidebarMixin from '@/mixins/sidebar';
  import meMixin from '@/mixins/me';

  export default {
    props: {
      isSidebar: {
        default: false
      }
    },

    mixins: [sidebarMixin, meMixin],

    components: {
      BookTopicNavigation,
      Logo
    },

    methods: {
      isActive(linkName) {
        return linkName === 'book' && this.$route.path.indexOf('module') > -1;
      },
      isRoomUrl() {
        return this.$route.path.indexOf('room') > -1;
      },
      close() {
        this.closeSidebar('navigation');
      }
    }
  }
</script>

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

  .content-navigation {
    display: flex;
    align-items: center;

    &__link {
      padding: 0 24px;
      @include navigation-link;
    }

    &__primary, &__secondary {
      display: none;
      flex-direction: row;

      @include desktop {
        display: flex;
      }
    }

    &__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;
    }

    &__link {
      &--secondary {
        @include regular-text;
      }

      &--active {
        color: $color-brand;
      }
    }

    $parent: &;

    &--sidebar {
      flex-direction: column;

      #{$parent}__primary, #{$parent}__secondary {
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      #{$parent}__link {
        @include heading-4;
        line-height: 2.5em;
        padding: 0;
        display: block;
        margin-bottom: 0.5*$small-spacing;

        &:only-child {
          margin-bottom: 0;
        }

      }

      #{$parent}__item {
        width: 100%;
        //border-bottom: 1px solid $color-white;

        /*&:nth-child(1) {*/
        /*  order: 3;*/
        /*  border-bottom: 0;*/
        /*}*/

        /*&:nth-child(2) {*/
        /*  order: 1;*/
        /*}*/

        /*&:nth-child(3) {*/
        /*  order: 2;*/
        /*}*/
      }
    }
  }
</style>