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"> <div class="top-navigation__item">
<router-link to="/book/topic/berufliche-grundbildung" active-class="top-navigation__link--active" <router-link to="/book/topic/berufliche-grundbildung" active-class="top-navigation__link--active"
:class="{'top-navigation__link--active': isActive('book')}" :class="{'top-navigation__link--active': isActive('book')}"
@click.native="hideMobileNavigation"
class="top-navigation__link">Inhalte class="top-navigation__link">Inhalte
</router-link> </router-link>
@ -11,12 +12,14 @@
</div> </div>
<div class="top-navigation__item"> <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> </router-link>
</div> </div>
<div class="top-navigation__item"> <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> </router-link>
</div> </div>
@ -40,6 +43,9 @@
methods: { methods: {
isActive(linkName) { isActive(linkName) {
return linkName === 'book' && this.$route.path.indexOf('module') > -1; 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> <template>
<nav class="book-topics"> <nav class="book-topics">
<router-link :to="{name: 'topic', params: {topicSlug: topic.slug}}" <router-link :to="{name: 'topic', params: {topicSlug: topic.slug}}"
tag="div" @click.native="hideMobileNavigation"
class="book-topics__topic book-subnavigation__item" tag="div"
:class="{'book-topics__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}" class="book-topics__topic book-subnavigation__item"
v-for="topic in topics" :class="{'book-topics__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
:key="topic.id"> v-for="topic in topics"
:key="topic.id">
{{topic.order}}. {{topic.order}}.
{{topic.title}} {{topic.title}}
</router-link> </router-link>
@ -24,14 +25,16 @@
data() { data() {
return { return {
topics: [ topics: []
]
} }
}, },
methods: { methods: {
topicId(id) { topicId(id) {
return atob(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> <template>
<div> <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 Kommunikation
</router-link> </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> </div>
</template> </template>
@ -13,6 +20,12 @@
mobile: { mobile: {
default: false default: false
} }
},
methods: {
hideMobileNavigation() {
this.$store.dispatch('showMobileNavigation', false);
}
} }
} }
</script> </script>