routes fixed, active classes for nav

src/components/LeftNav.vue

@@ -1,20 +1,20 @@
 <template >
-    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
+    <nav class="col-md-2 d-none d-md-block bg-light sidebar" @click="activate">
         <div class="sidebar-sticky">
             <ul class="nav flex-column mb-2">
-                <NavItem v-for="link in links" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon" :to="link.to"/>
+                <NavItem v-for="link in links" :isActive="activate(link.id)" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon" :to="link.to"/>
             </ul>
             <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                 <span>Slayer Masters</span>
             </h6>
             <ul class="nav flex-column mb-2">
-                <NavItem v-for="master in masters" :key="master.id" :title="master.name" :id="master.id" :icon_url="master.image" :to="'master'"/>
+                <NavItem v-for="master in masters" :isActive="activate(master.id)"  :key="master.id" :title="master.name" :id="master.id" :icon_url="master.image" :to="'master'"/>
             </ul>
             <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                 <span>Other Links</span>
             </h6>
             <ul class="nav flex-column mb-2">
-                <NavItem v-for="link in extraLinks" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon" :url="link.url"/>
+                <NavItem v-for="link in extraLinks" :isActive="activate(link.id)" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon" :url="link.url"/>
             </ul>
         </div>
     </nav>
@@ -50,6 +50,11 @@ export default {
 			]
 		}
 	},
+	methods: {
+		activate(id) {
+			return this.$route.params.id == id;
+		},
+	}
 }
 
 </script>

src/components/NavItem.vue

@@ -1,14 +1,14 @@
 <template>
-    <li class="nav-item" @click="contentSwitch">
+    <li class="nav-item">
         <router-link class="nav-link" v-bind:class="{ active: isActive }" v-if="to" :to="{ name: to, params: { id: id }}">
             <img class="mx-2 rounded-circle shadow" v-if="icon_url" :src="require(`../assets/${icon_url}`)" width="42" height="42">
-            <span class="h6">{{ title }} {{to}}</span>
+            <span class="h6">{{ title }}</span>
 
         </router-link>
 
         <a class="nav-link" v-bind:class="{ active: isActive }" v-if="url" :href="url" >
             <img class="mx-2 rounded-circle shadow" v-if="icon_url" :src="require(`../assets/${icon_url}`)" width="42" height="42">
-            <span class="h6">{{ title }} {{to}}</span>
+            <span class="h6">{{ title }}</span>
         </a>
     </li>
 </template>
@@ -18,7 +18,6 @@ export default {
 	name: "NavItem",
 	data() {
 		return {
-			isActive: false,
 		}
 	},
 	props: {
@@ -28,15 +27,15 @@ export default {
 		component: String,
 		url: String,
 		to: String,
+		isActive: Boolean,
 	},
-	methods: {
-		contentSwitch() {
-			this.$emit('contentSwitch', this.component);
-		}
-	}
 }
 </script>
 
 <style scoped>
-
+    .active {
+        background: darkgray;
+        color: black;
+        cursor: default;
+    }
 </style>

src/components/TableSection.vue

@@ -1,7 +1,7 @@
 <template>
     <section>
         <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 my-2">
-            <h1 class="h3 text-uppercase">{{currentMaster.name}}</h1>
+            <h1 class="h3 text-uppercase"><span v-if="currentMaster">{{currentMaster.name}}</span></h1>
             <div class="btn-toolbar mb-2 mb-md-0">
                 <div class="btn-group mr-2">
                     <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
@@ -54,8 +54,7 @@ export default {
 	},
 	methods: {
 		reload() {
-		    this.currentMaster = this.getMasterById(this.mastersData.masters,this.$route.params.id);
+		    this.currentMaster = this.mastersData.masters[this.$route.params.id]
-
 		    this.filterData();
 		},
 	    filterData() {
@@ -68,8 +67,7 @@ export default {
 			return jsonObject.filter(item => item.id === id)[0];
 		},
 	},
-	created() {
+	mounted() {
-		console.log(this.currentMaster)
 		this.reload();
 	},
 	watch: {

src/components/TopNav.vue

@@ -1,6 +1,6 @@
 <template>
     <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow  " role="navigation" aria-label="main navigation">
-        <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Slayer Weight Calculator</a>
+        <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="/">Slayer Weight Calculator</a>
 
         <small class="text-white-50 font-italic">A calculator for slayer geeks that need to know percentages.</small>
 

src/data/masters.json

@@ -1,44 +1,44 @@
 {
-  "masters": [
+  "masters": {
-    {
+    "0": {
       "id": 0,
       "name": "Turael",
       "image": "Turael.png"
     },
-    {
+    "1": {
       "id": 1,
       "name": "Krystilia",
       "image": "Krystilia.png"
     },
-    {
+  "2":{
       "id": 2,
       "name": "Mazchna",
       "image": "Mazchna.png"
     },
-    {
+  "3":{
       "id": 3,
       "name": "Vannaka",
       "image": "Vannaka.png"
     },
-    {
+  "4":{
       "id": 4,
       "name": "Chaeldar",
       "image": "Chaeldar.png"
     },
-    {
+  "5":{
       "id": 5,
       "name": "Konar quo Maten",
       "image": "Konar quo Maten.png"
     },
-    {
+  "6":{
       "id": 6,
       "name": "Nieve",
       "image": "Nieve.png"
     },
-    {
+  "7":{
       "id": 7,
       "name": "Duradel",
       "image": "Duradel.png"
     }
-  ]
+}
 }

src/main.js

@@ -13,7 +13,8 @@ Vue.use(VueRouter);
 
 const routes = [
 	{ path: '/', name: 'config', component: ConfigSection },
-	{ path: '/master/:id', name: 'master', component: TableSection }
+	{ path: '/master/:id', name: 'master', component: TableSection },
+	{ path: '**', redirect: {name: 'config'}},
 ];
 
 const router = new VueRouter({