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

Always close the mobile navigation on router link click

This commit is contained in:
Ramon Wenger 2019-11-28 15:34:42 +01:00
parent 88bbd505f0
commit f7213b44e7
3 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@
<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>
@ -11,12 +12,14 @@
</div>
<div class="top-navigation__item">
<router-link to="/rooms" active-class="top-navigation__link--active" class="top-navigation__link">Räume
<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" class="top-navigation__link">Portfolio
<router-link to="/portfolio" active-class="top-navigation__link--active" @click.native="hideMobileNavigation"
class="top-navigation__link">Portfolio
</router-link>
</div>
@ -40,6 +43,9 @@
methods: {
isActive(linkName) {
return linkName === 'book' && this.$route.path.indexOf('module') > -1;
},
hideMobileNavigation() {
this.$store.dispatch('showMobileNavigation', false);
}
}
}

17
client/src/components/book-navigation/BookTopicNavigation.vue
View File

@ -1,11 +1,12 @@
<template>
<nav class="book-topics">
<router-link :to="{name: 'topic', params: {topicSlug: topic.slug}}"
tag="div"
class="book-topics__topic book-subnavigation__item"
:class="{'book-topics__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
v-for="topic in topics"
:key="topic.id">
@click.native="hideMobileNavigation"
tag="div"
class="book-topics__topic book-subnavigation__item"
:class="{'book-topics__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
v-for="topic in topics"
:key="topic.id">
{{topic.order}}.
{{topic.title}}
</router-link>
@ -24,14 +25,16 @@
data() {
return {
topics: [
]
topics: []
}
},
methods: {
topicId(id) {
return atob(id)
},
hideMobileNavigation() {
this.$store.dispatch('showMobileNavigation', false);
}
},

17
client/src/components/book-navigation/InstrumentNavigation.vue
View File

@ -1,9 +1,16 @@
<template>
<div>
<router-link tag="div" class="book-subnavigation__item" :class="{'book-subnavigation__item--mobile': mobile}" to="/instruments/sprache-kommunikation">Sprache und
<router-link tag="div" class="book-subnavigation__item"
:class="{'book-subnavigation__item--mobile': mobile}"
@click.native="hideMobileNavigation"
to="/instruments/sprache-kommunikation">Sprache und
Kommunikation
</router-link>
<router-link tag="div" class="book-subnavigation__item" :class="{'book-subnavigation__item--mobile': mobile}" to="/instruments/gesellschaft">Gesellschaft</router-link>
<router-link tag="div" class="book-subnavigation__item"
:class="{'book-subnavigation__item--mobile': mobile}"
@click.native="hideMobileNavigation"
to="/instruments/gesellschaft">Gesellschaft
</router-link>
</div>
</template>
@ -13,6 +20,12 @@
mobile: {
default: false
}
},
methods: {
hideMobileNavigation() {
this.$store.dispatch('showMobileNavigation', false);
}
}
}
</script>