Refactor active link function
This commit is contained in:
parent
ec5b659ff0
commit
66a41ff85b
|
|
@ -24,12 +24,12 @@ function toggleNav() {
|
||||||
state.showMenu = !state.showMenu;
|
state.showMenu = !state.showMenu;
|
||||||
}
|
}
|
||||||
|
|
||||||
function menuActive(checkPath) {
|
function isInRoutePath(checkPaths: string[]) {
|
||||||
return route.path.startsWith(checkPath);
|
return checkPaths.some((path) => route.path.startsWith(path))
|
||||||
}
|
}
|
||||||
|
|
||||||
function inLearningPath() {
|
function inLearningPath() {
|
||||||
return route.path.startsWith('/learningpath/') || route.path.startsWith('/circle/');
|
return isInRoutePath(['/learningpath/', '/circle/']);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getLearningPathStringProp (prop: 'title' | 'slug'): string {
|
function getLearningPathStringProp (prop: 'title' | 'slug'): string {
|
||||||
|
|
@ -176,7 +176,7 @@ const profileDropdownData = [
|
||||||
v-if="inLearningPath()"
|
v-if="inLearningPath()"
|
||||||
to="/learningpath/versicherungsvermittlerin"
|
to="/learningpath/versicherungsvermittlerin"
|
||||||
class="nav-item"
|
class="nav-item"
|
||||||
:class="{'nav-item--active': menuActive('/learningpath/')}"
|
:class="{'nav-item--active': inLearningPath()}"
|
||||||
>
|
>
|
||||||
Lernpfad
|
Lernpfad
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
@ -185,7 +185,7 @@ const profileDropdownData = [
|
||||||
v-if="inLearningPath()"
|
v-if="inLearningPath()"
|
||||||
to="/competences/"
|
to="/competences/"
|
||||||
class="nav-item"
|
class="nav-item"
|
||||||
:class="{'nav-item--active': menuActive('/competences/')}"
|
:class="{'nav-item--active': isInRoutePath(['/competences/'])}"
|
||||||
>
|
>
|
||||||
Kompetenzprofil
|
Kompetenzprofil
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
@ -194,14 +194,14 @@ const profileDropdownData = [
|
||||||
<router-link
|
<router-link
|
||||||
to="/shop"
|
to="/shop"
|
||||||
class="nav-item"
|
class="nav-item"
|
||||||
:class="{'nav-item--active': menuActive('/shop')}"
|
:class="{'nav-item--active': isInRoutePath(['/shop'])}"
|
||||||
>
|
>
|
||||||
Shop
|
Shop
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link
|
<router-link
|
||||||
to="/mediacenter"
|
to="/mediacenter"
|
||||||
class="nav-item"
|
class="nav-item"
|
||||||
:class="{'nav-item--active': menuActive('/mediacenter')}"
|
:class="{'nav-item--active': isInRoutePath(['/mediacenter'])}"
|
||||||
>
|
>
|
||||||
Mediathek
|
Mediathek
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue