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

Highlight active navigation link with brand color

This commit is contained in:
Ramon Wenger 2020-06-22 09:55:01 +02:00
parent 8605fd4683
commit 2d069c589f
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/components/book-navigation/ContentNavigation.vue
View File

@ -29,7 +29,7 @@
<div class="content-navigation__item"> <div class="content-navigation__item">
<router-link <router-link
to="/" :to="{name: 'news'}"
active-class="content-navigation__link--active" active-class="content-navigation__link--active"
class="content-navigation__link" class="content-navigation__link"
@click.native="close">News @click.native="close">News
@ -49,6 +49,7 @@
<div class="content-navigation__secondary"> <div class="content-navigation__secondary">
<div class="content-navigation__item content-navigation__item--secondary"> <div class="content-navigation__item content-navigation__item--secondary">
<router-link <router-link
:class="{'content-navigation__link--active': isRoomUrl()}"
to="/rooms" to="/rooms"
active-class="content-navigation__link--active" active-class="content-navigation__link--active"
class="content-navigation__link content-navigation__link--secondary" class="content-navigation__link content-navigation__link--secondary"
@ -107,6 +108,9 @@
isActive(linkName) { isActive(linkName) {
return linkName === 'book' && this.$route.path.indexOf('module') > -1; return linkName === 'book' && this.$route.path.indexOf('module') > -1;
}, },
isRoomUrl() {
return this.$route.path.indexOf('room') > -1;
},
close() { close() {
this.closeSidebar('navigation'); this.closeSidebar('navigation');
} }
@ -161,6 +165,10 @@
&--secondary { &--secondary {
@include regular-text; @include regular-text;
} }
&--active {
color: $color-brand;
}
} }
$parent: &; $parent: &;