From 7a73545d8af862530a539fc5478b8dd8af5be7fc Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Sun, 21 Oct 2018 20:44:54 +0200
Subject: [PATCH] Mark top navigation links as active on module pages

---
 client/src/components/TopNavigation.vue | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/client/src/components/TopNavigation.vue b/client/src/components/TopNavigation.vue
index 022f67aa..518f84c5 100644
--- a/client/src/components/TopNavigation.vue
+++ b/client/src/components/TopNavigation.vue
@@ -1,11 +1,26 @@
 <template>
   <nav class="top-navigation">
-    <router-link to="/book/topic/geld-und-kauf" active-class="top-navigation__link--active" class="top-navigation__link">Inhalte</router-link>
-    <router-link to="/rooms" active-class="top-navigation__link--active" class="top-navigation__link">Räume</router-link>
-    <router-link to="/404" active-class="top-navigation__link--active" class="top-navigation__link">Portfolio</router-link>
+    <router-link to="/book/topic/geld-und-kauf" active-class="top-navigation__link--active"
+                 :class="{'top-navigation__link--active': isActive('book')}"
+                 class="top-navigation__link">Inhalte
+    </router-link>
+    <router-link to="/rooms" active-class="top-navigation__link--active" class="top-navigation__link">Räume
+    </router-link>
+    <router-link to="/404" active-class="top-navigation__link--active" class="top-navigation__link">Portfolio
+    </router-link>
   </nav>
 </template>
 
+<script>
+  export default {
+    methods: {
+      isActive(linkName) {
+        return linkName === 'book' && this.$route.path.indexOf('module') > -1;
+      }
+    }
+  }
+</script>
+
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";