#167 [pl][nouns] split dictionaries into subpages - show menu on subpages - fixes

locale/pl/nouns/NounsNav.vue

@@ -1,18 +1,18 @@
 <template>
     <section>
         <div class="d-none d-md-inline-flex btn-group btn-block mb-2">
-            <a v-for="{name, icon, route} in links" :href="`/${config.nouns.route}/${route}`"
+            <router-link v-for="{name, icon, route} in links" :to="buildRoute(route)"
-               :class="['btn', $route.fullPath === `/${encodeURIComponent(config.nouns.route)}/${encodeURIComponent(route)}` ? 'btn-primary' : 'btn-outline-primary']">
+                         :class="['btn', isActiveRoute(route) ? 'btn-primary' : 'btn-outline-primary']">
                 <Icon :v="icon"/>
                 <T>nouns.{{name}}.header</T>
-            </a>
+            </router-link>
         </div>
         <div class="d-block d-md-none btn-group-vertical btn-block mb-2">
-            <a v-for="{name, icon, route} in links" :href="`/${config.nouns.route}/${route}`"
+            <router-link v-for="{name, icon, route} in links" :to="buildRoute(route)"
-               :class="['btn', $route.fullPath === `/${encodeURIComponent(config.nouns.route)}/${encodeURIComponent(route)}` ? 'btn-primary' : 'btn-outline-primary']">
+                         :class="['btn', isActiveRoute(route) ? 'btn-primary' : 'btn-outline-primary']">
                 <Icon :v="icon"/>
                 <T>nouns.{{name}}.header</T>
-            </a>
+            </router-link>
         </div>
     </section>
 </template>
@@ -38,5 +38,13 @@
                 links,
             };
         },
+        methods: {
+            buildRoute(route) {
+                return `/${this.config.nouns.route}/${route}`;
+            },
+            isActiveRoute(route) {
+                return decodeURIComponent(this.$route.fullPath) === this.buildRoute(route);
+            },
+        }
     }
 </script>

locale/pl/nouns/dukatywy.vue

@@ -1,16 +1,11 @@
 <template>
     <div>
-        <h2>
-            <Icon v="book"/>
-            <T>nouns.headerLonger</T>
-        </h2>
-
         <NounsNav/>
 
-        <h3>
+        <h2>
             <Icon v="ghost"/>
             <T>nouns.dukajNouns.header</T>
-        </h3>
+        </h2>
 
         <div class="d-flex flex-column flex-md-row">
             <div>

locale/pl/nouns/neutratywy.vue

@@ -1,16 +1,11 @@
 <template>
     <div>
-        <h2>
-            <Icon v="book"/>
-            <T>nouns.headerLonger</T>
-        </h2>
-
         <NounsNav/>
 
-        <h3>
+        <h2>
             <Icon v="deer"/>
             <T>nouns.neuterNouns.header</T>
-        </h3>
+        </h2>
 
         <div class="d-flex flex-column flex-md-row">
             <div>

locale/pl/nouns/osobatywy.vue

@@ -1,17 +1,12 @@
 <template>
     <div>
-        <h2>
-            <Icon v="book"/>
-            <T>nouns.headerLonger</T>
-        </h2>
-
         <NounsNav/>
 
-        <h3>
+        <h2>
             <Icon v="user-friends"/>
             <T>nouns.personNouns.header</T>
             <small><NormativeBadge/></small>
-        </h3>
+        </h2>
 
         <section>
             <T>nouns.personNouns.info</T>

routes/inclusive.vue

@@ -1,16 +1,11 @@
 <template>
     <div>
-        <h2>
-            <Icon v="book"/>
-            <T>nouns.headerLonger</T>
-        </h2>
-
         <NounsNav/>
 
-        <h3>
+        <h2>
             <Icon v="book-heart"/>
             <T>nouns.inclusive.headerLong</T>
-        </h3>
+        </h2>
 
         <section>
             <T>nouns.inclusive.info</T>

routes/nouns.vue

@@ -1,12 +1,12 @@
 <template>
     <div>
+        <NounsNav/>
+
         <h2>
             <Icon v="book"/>
             <T>nouns.headerLonger</T>
         </h2>
 
-        <NounsNav/>
-
         <section>
             <T>nouns.intro</T>
 

routes/queerTerms.vue

@@ -1,16 +1,11 @@
 <template>
     <div>
-        <h2>
-            <Icon v="book"/>
-            <T>nouns.headerLonger</T>
-        </h2>
-
         <NounsNav/>
 
-        <h3>
+        <h2>
             <Icon v="flag"/>
             <T>nouns.terms.headerLong</T>
-        </h3>
+        </h2>
 
         <section>
             <T>nouns.terms.info</T>