109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<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>
|