From 1819c0ba654be872a0bb0e675af2f9cdf6906d4b Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sat, 25 Jan 2020 13:59:39 +0100
Subject: [PATCH] fix: manually add active style on vue router links

---
 client/src/layouts/Default.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/client/src/layouts/Default.vue b/client/src/layouts/Default.vue
index 72d9fd7..2701105 100644
--- a/client/src/layouts/Default.vue
+++ b/client/src/layouts/Default.vue
@@ -65,21 +65,25 @@
           <!-- NAVIGATION -->
           <router-link
             :to="{ name: 'summoner', params: { region: $route.params.region, name: $route.params.name }}"
+            :class="isRouteActive('summoner')"
             class="pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
             exact
           >overview</router-link>
           <router-link
             :to="{ name: 'summonerChampions', params: { region: $route.params.region, name: $route.params.name }}"
+            :class="isRouteActive('summonerChampions')"
             class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
             exact
           >champions</router-link>
           <router-link
             :to="{ name: 'summonerRecords', params: { region: $route.params.region, name: $route.params.name }}"
+            :class="isRouteActive('summonerRecords')"
             class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
             exact
           >records</router-link>
           <router-link
             :to="{ name: 'summonerLive', params: { region: $route.params.region, name: $route.params.name }}"
+            :class="isRouteActive('summonerLive')"
             class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
             exact
           >live game</router-link>
@@ -159,6 +163,11 @@ export default {
     apiCall() {
       this.basicRequest({ summoner: this.summoner, region: this.region })
     },
+    isRouteActive(currentRoute) {
+      return {
+        'router-link-active': this.$route.name === currentRoute
+      }
+    },
     redirect(summoner, region) {
       this.$router.push(`/summoner/${region}/${summoner}`)
     },