Refactor active link function

This commit is contained in:
Christian Cueni 2022-08-17 09:22:22 +02:00
parent ec5b659ff0
commit 66a41ff85b
1 changed files with 7 additions and 7 deletions

View File

@ -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>