navigation emits

src/App.vue

@@ -21,7 +21,7 @@ export default {
 		MainContent,
 		LeftNav,
 		TopNav,
-	}
+	},
 }
 </script>
 

src/components/ConfigSection.vue

@@ -0,0 +1,27 @@
+<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>
+            <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>
+                    <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
+                </div>
+                <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                    This week
+                </button>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script>
+export default {
+	name: "ConfigSection"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/LeftNav.vue

@@ -2,13 +2,13 @@
     <nav class="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"/>
+                <NavItem v-for="link in links" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon" :component="'config-section'"/>
             </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"/>
+                <NavItem v-for="master in masters" :key="master.id" :title="master.name" :id="master.id" :icon_url="master.image" :component="'table-section'"/>
             </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>
@@ -40,7 +40,6 @@ export default {
 			],
 			masters: master_json.masters,
 			extraLinks: [
-
 				{
 					id: 101,
 					icon: 'osrswiki.png',

src/components/MainContent.vue

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

src/components/NavItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <li class="nav-item">
+    <li class="nav-item" @click="contentSwitch">
         <a class="nav-link active" v-bind:class="{ active: isActive }" href="#">
             <img class="mx-2" v-if="icon_url" :src="require(`../assets/${icon_url}`)" width="42" height="42">
             <span class="h6">{{ title }}</span>
@@ -19,6 +19,13 @@ export default {
 		id: Number,
 		icon_url: String,
 		title: String,
+		component: String,
+	},
+	methods: {
+		contentSwitch() {
+			this.$emit('contentSwitch', this.component);
+			console.log('test')
+		}
 	}
 }
 </script>

src/components/TableSection.vue

@@ -14,7 +14,7 @@
             </div>
         </div>
         <div class="table-responsive">
-            <b-table striped hover :items="filtered_items"></b-table>
+            <b-table striped hover :items="filtered_items" :fields="fields"></b-table>
         </div>
     </section>
 </template>
@@ -28,6 +28,16 @@ export default {
 	},
 	data() {
 		return {
+		    fields: [
+				{
+					key: 'last_name',
+					sortable: true
+				},
+				{
+					key: 'first_name',
+					sortable: true
+				},
+			],
 		    total_weight: 100,
 			items: [
 				{ age_requirement: 40, first_name: 'Dickerson', last_name: 'Macdonald', combat_requirement: 10 },
@@ -47,7 +57,7 @@ export default {
 			// 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);
-			console.log(this.filtered_items)
+
 		},
 	},
 	mounted() {