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="close"
        >
          {{ $flavor.textTopics }}
        </router-link>

        <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="close"
        >
          {{ $flavor.textInstruments }}
        </router-link>
      </div>

      <div class="content-navigation__item">
        <router-link
          :to="{ name: 'news' }"
          active-class="content-navigation__link--active"
          class="content-navigation__link"
          data-cy="news-navigation-link"
          v-if="!me.readOnly"
          @click="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="close"
        >
          Räume
        </router-link>
      </div>

      <div
        class="content-navigation__item content-navigation__item--secondary"
        v-if="showPortfolio"
      >
        <router-link
          to="/portfolio"
          active-class="content-navigation__link--active"
          class="content-navigation__link content-navigation__link--secondary"
          @click="close"
        >
          Portfolio
        </router-link>
      </div>
      <div
        class="content-navigation__item content-navigation__item--secondary"
        v-if="showTime2Learn"
      >
        <a
          active-class="content-navigation__link--active"
          class="content-navigation__link content-navigation__link--secondary"
          href="https://app.time2learn.ch/app/login.aspx "
          target="_blank"
        >
          time2learn
        </a>
      </div>
      <div
        class="content-navigation__item content-navigation__item--secondary"
        v-if="isSidebar"
      >
        <a
          :href="`https://${$flavor.baseUrl}/support`"
          target="_blank"
          class="content-navigation__link content-navigation__link--secondary"
          @click="close"
          >Support
        </a>
      </div>
    </div>
  </nav>
</template>

<script>
import TopicNavigation from '@/components/book-navigation/TopicNavigation.vue';

import sidebarMixin from '@/mixins/sidebar';
import meMixin from '@/mixins/me';
import { defineAsyncComponent } from 'vue';

const Logo = defineAsyncComponent(() => import('@/components/icons/Logo.vue'));

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

  mixins: [sidebarMixin, meMixin],

  components: {
    TopicNavigation,
    Logo,
  },

  computed: {
    showPortfolio() {
      return this.$flavor.showPortfolio;
    },
    showTime2Learn() {
      return this.$flavor.showTime2Learn;
    },
  },

  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;
    white-space: nowrap;
  }

  &__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: auto;
    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>