From f7213b44e7918cfe9c2583ffe4014164c4d12ebe Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 28 Nov 2019 15:34:42 +0100
Subject: [PATCH] Always close the mobile navigation on router link click

---
 client/src/components/TopNavigation.vue         | 10 ++++++++--
 .../book-navigation/BookTopicNavigation.vue     | 17 ++++++++++-------
 .../book-navigation/InstrumentNavigation.vue    | 17 +++++++++++++++--
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/client/src/components/TopNavigation.vue b/client/src/components/TopNavigation.vue
index 67332120..4501c953 100644
--- a/client/src/components/TopNavigation.vue
+++ b/client/src/components/TopNavigation.vue
@@ -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);
       }
     }
   }
diff --git a/client/src/components/book-navigation/BookTopicNavigation.vue b/client/src/components/book-navigation/BookTopicNavigation.vue
index f635094f..83671191 100644
--- a/client/src/components/book-navigation/BookTopicNavigation.vue
+++ b/client/src/components/book-navigation/BookTopicNavigation.vue
@@ -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);
       }
     },
 
diff --git a/client/src/components/book-navigation/InstrumentNavigation.vue b/client/src/components/book-navigation/InstrumentNavigation.vue
index 7e4e80e4..e46e2bb0 100644
--- a/client/src/components/book-navigation/InstrumentNavigation.vue
+++ b/client/src/components/book-navigation/InstrumentNavigation.vue
@@ -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>