From 206e297576f8cecaf1101b283140174a5c9ebf0e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 10 Mar 2021 18:37:06 +0100
Subject: [PATCH] add active state to route links

---
 src/App.vue | 35 +++++++++++++++--------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0138c1d..eaa3506 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,17 +8,8 @@
             <span class="sr-only">Menu</span>
           </template>
 
-          <b-dropdown-item :to="{ name: 'home' }">
-            {{ $t('sections.home') }}
-          </b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'introduction' }">
-            {{ $t('sections.introduction') }}
-          </b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'blog' }">
-            {{ $t('sections.blog') }}
-          </b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'contact' }">
-            {{ $t('sections.contact') }}
+          <b-dropdown-item v-for="name in subRoutes" :key="name" :to="{ name }">
+            {{ $t('sections.' + name) }}
           </b-dropdown-item>
         </b-dropdown>
 
@@ -26,15 +17,12 @@
           {{ $t('title') }}
         </b-navbar-brand>
 
-        <b-nav class="ml-auto">
-          <b-nav-item :to="{ name: 'library' }">
-            {{ $t('sections.library') }}
-          </b-nav-item>
-          <b-nav-item :to="{ name: 'kit' }">
-            {{ $t('sections.kit') }}
-          </b-nav-item>
-          <b-nav-item :to="{ name: 'gallery' }">
-            {{ $t('sections.gallery') }}
+        <b-nav class="ml-auto" pills>
+          <b-nav-item
+            v-for="name in mainRoutes" :key="name"
+            :to="{ name }" :active="$route.name === name"
+          >
+            {{ $t('sections.' + name) }}
           </b-nav-item>
         </b-nav>
       </b-navbar>
@@ -59,6 +47,13 @@ export default {
       // all titles will be injected into this template
       titleTemplate: '%s | ' + this.$t('title')
     }
+  },
+
+  data () {
+    return {
+      mainRoutes: ['library', 'kit', 'gallery'],
+      subRoutes: ['home', 'introduction', 'blog', 'contact']
+    }
   }
 }
 </script>