ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Mark top navigation links as active on module pages

This commit is contained in:
Ramon Wenger 2018-10-21 20:44:54 +02:00
parent e1ac0e696f
commit 7a73545d8a
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/TopNavigation.vue
View File

@ -1,11 +1,26 @@
<template> <template>
<nav class="top-navigation"> <nav class="top-navigation">
<router-link to="/book/topic/geld-und-kauf" active-class="top-navigation__link--active" class="top-navigation__link">Inhalte</router-link> <router-link to="/book/topic/geld-und-kauf" active-class="top-navigation__link--active"
<router-link to="/rooms" active-class="top-navigation__link--active" class="top-navigation__link">Räume</router-link> :class="{'top-navigation__link--active': isActive('book')}"
<router-link to="/404" active-class="top-navigation__link--active" class="top-navigation__link">Portfolio</router-link> class="top-navigation__link">Inhalte
</router-link>
<router-link to="/rooms" active-class="top-navigation__link--active" class="top-navigation__link">Räume
</router-link>
<router-link to="/404" active-class="top-navigation__link--active" class="top-navigation__link">Portfolio
</router-link>
</nav> </nav>
</template> </template>
<script>
export default {
methods: {
isActive(linkName) {
return linkName === 'book' && this.$route.path.indexOf('module') > -1;
}
}
}
</script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";