change dflex to col, vuex, routing, router-view, currectMaster

package.json

@@ -11,7 +11,9 @@
     "bootstrap": "^4.4.1",
     "bootstrap-vue": "^2.3.0",
     "core-js": "^3.4.4",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.5",
+    "vuex": "^3.1.2"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.7.0",

src/App.vue

@@ -2,8 +2,8 @@
   <div id="app">
     <top-nav></top-nav>
     <div class="container-fluid">
-      <div class="d-flex">
+      <div class="row">
-        <left-nav class="flox-grow-1"></left-nav>
+        <left-nav></left-nav>
         <main-content></main-content>
       </div>
     </div>

src/components/ConfigSection.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">{{ }}</h1>
+            <h1 class="h3 text-uppercase">Account Settings</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>

src/components/LeftNav.vue

@@ -1,20 +1,20 @@
 <template >
-    <nav class="bg-light sidebar">
+    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
         <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" :component="'config-section'"/>
+                <NavItem v-for="link in links" :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" :component="'table-section'"/>
+                <NavItem v-for="master in masters" :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"/>
+                <NavItem v-for="link in extraLinks" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon" :url="link.url"/>
             </ul>
         </div>
     </nav>
@@ -36,6 +36,7 @@ export default {
 					id: 100,
 					icon: 'hiscores.png',
 					title: 'Account settings',
+					to: 'config',
 				},
 			],
 			masters: master_json.masters,
@@ -44,6 +45,7 @@ export default {
 					id: 101,
 					icon: 'osrswiki.png',
 					title: 'OSRS Wiki',
+					url: 'https://osrs.wiki/',
 				},
 			]
 		}

src/components/MainContent.vue

@@ -1,22 +1,18 @@
 <template>
-  <main role="main" class="ml-sm-auto col-lg-10 px-4">
+  <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
-    <component :is="currentComponent"></component>
+    <router-view></router-view>
   </main>
 </template>
 
 <script>
-import TableSection from "./TableSection";
-import ConfigSection from "./ConfigSection";
-
 export default {
 	name: 'MainContent',
 	components: {
-		TableSection,
 	},
 	props: {
 		headerText: String,
 		currentComponent: {
-		  default: 'table-section',
+		  default: 'config-section',
 		},
 	},
 }

src/components/NavItem.vue

@@ -1,8 +1,14 @@
 <template>
     <li class="nav-item" @click="contentSwitch">
-        <a class="nav-link active" v-bind:class="{ active: isActive }" href="#">
+        <router-link class="nav-link" v-bind:class="{ active: isActive }" v-if="to" :to="{ name: to, params: { id: id }}">
-            <img class="mx-2" v-if="icon_url" :src="require(`../assets/${icon_url}`)" width="42" height="42">
+            <img class="mx-2 rounded-circle shadow" v-if="icon_url" :src="require(`../assets/${icon_url}`)" width="42" height="42">
-            <span class="h6">{{ title }}</span>
+            <span class="h6">{{ title }} {{to}}</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>
         </a>
     </li>
 </template>
@@ -20,11 +26,12 @@ export default {
 		icon_url: String,
 		title: String,
 		component: String,
+		url: String,
+		to: String,
 	},
 	methods: {
 		contentSwitch() {
 			this.$emit('contentSwitch', this.component);
-			console.log('test')
 		}
 	}
 }

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">Dashboard</h1>
+            <h1 class="h3 text-uppercase">{{currentMaster.name}}</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>
@@ -20,15 +20,15 @@
 </template>
 
 <script>
+import master_json from "../data/masters";
 
 export default {
 	name: "TableSection",
-	props: {
-	    tableData: Object,
-	},
 	data() {
 		return {
-		    fields: [
+			mastersData: master_json,
+		    currentMaster: null,
+			fields: [
 				{
 					key: 'last_name',
 					sortable: true
@@ -53,17 +53,30 @@ export default {
 		}
 	},
 	methods: {
+		reload() {
+		    this.currentMaster = this.getMasterById(this.mastersData.masters,this.$route.params.id);
+
+		    this.filterData();
+		},
 	    filterData() {
 			// this.filtered_items = this.items.filter(item => item.last_name.includes('Carney'));
 
 			this.filtered_items = this.items.filter(item => item.combat_requirement < this.filters.combat_level);
 
 		},
+		getMasterById(jsonObject, id) {
+			return jsonObject.filter(item => item.id === id)[0];
+		},
 	},
-	mounted() {
+	created() {
-	    this.filterData();
+		console.log(this.currentMaster)
+		this.reload();
 	},
-
+	watch: {
+		$route(to, from) {
+			this.reload();
+		}
+	}
 }
 </script>
 

src/main.js

@@ -2,10 +2,26 @@ import '@babel/polyfill'
 import 'mutationobserver-shim'
 import Vue from 'vue'
 import './plugins/bootstrap-vue'
+import VueRouter from 'vue-router'
 import App from './App.vue'
 
-Vue.config.productionTip = false
+import ConfigSection from "./components/ConfigSection";
+import TableSection from "./components/TableSection";
+
+Vue.config.productionTip = false;
+Vue.use(VueRouter);
+
+const routes = [
+	{ path: '/', name: 'config', component: ConfigSection },
+	{ path: '/master/:id', name: 'master', component: TableSection }
+];
+
+const router = new VueRouter({
+	mode: 'history',
+	routes
+});
 
 new Vue({
+	router,
 	render: h => h(App),
-}).$mount('#app')
+}).$mount('#app');

yarn.lock

@@ -1708,7 +1708,7 @@ bootstrap-vue@^2.3.0:
     portal-vue "^2.1.7"
     vue-functional-data-merge "^3.1.0"
 
-bootstrap@4.4.1, "bootstrap@>=4.4.1 <5.0.0":
+"bootstrap@>=4.4.1 <5.0.0", bootstrap@^4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.4.1.tgz#8582960eea0c5cd2bede84d8b0baf3789c3e8b01"
   integrity sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==
@@ -7941,6 +7941,11 @@ vue-loader@^15.7.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
+  integrity sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg==
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
@@ -7967,6 +7972,11 @@ vue@^2.6.10:
   resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&sync_timestamp=1580160165548&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha1-dllNh31LEiNEBuhONSdcbVFBJcU=
 
+vuex@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.2.tgz#a2863f4005aa73f2587e55c3fadf3f01f69c7d4d"
+  integrity sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ==
+
 watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.npm.taobao.org/watchpack/download/watchpack-1.6.0.tgz?cache=0&sync_timestamp=1579095974142&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwatchpack%2Fdownload%2Fwatchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"