<template>
  <nav class="top-navigation" :class="{'top-navigation--mobile': mobile}">
    <div class="top-navigation__item">
      <router-link to="/book/topic/berufliche-grundbildung" active-class="top-navigation__link--active"
                   :class="{'top-navigation__link--active': isActive('book')}"
                   @click.native="hideMobileNavigation"
                   class="top-navigation__link">Inhalte
      </router-link>

      <mobile-subnavigation v-if="mobile"></mobile-subnavigation>

    </div>

    <div class="top-navigation__item">
      <router-link to="/rooms" active-class="top-navigation__link--active" @click.native="hideMobileNavigation"
                   class="top-navigation__link">Räume
      </router-link>
    </div>

    <div class="top-navigation__item">
      <router-link to="/portfolio" active-class="top-navigation__link--active" @click.native="hideMobileNavigation"
                   class="top-navigation__link">Portfolio
      </router-link>
    </div>

  </nav>
</template>

<script>
  import MobileSubnavigation from '@/components/book-navigation/MobileSubnavigation';

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

    components: {
      MobileSubnavigation
    },

    methods: {
      isActive(linkName) {
        return linkName === 'book' && this.$route.path.indexOf('module') > -1;
      },
      hideMobileNavigation() {
        this.$store.dispatch('showMobileNavigation', false);
      }
    }
  }
</script>

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

  .top-navigation {
    display: flex;

    &__link {
      font-size: 1.0625rem;
      padding: 0 24px;
      font-family: $sans-serif-font-family;
      font-weight: $font-weight-regular;
      color: $color-silver-dark;

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

    $parent: &;

    &--mobile {
      flex-direction: column;

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

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

      }

      #{$parent}__item {
        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>
