init parsing items in tables and filtering

package.json

@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "bootstrap": "4.4.1",
+    "bootstrap": "^4.4.1",
     "bootstrap-vue": "^2.3.0",
     "core-js": "^3.4.4",
     "vue": "^2.6.10"
@@ -19,7 +19,7 @@
     "@vue/cli-plugin-eslint": "^4.1.0",
     "@vue/cli-service": "^4.1.0",
     "babel-eslint": "^10.0.3",
-    "bootstrap": "^4.3.1",
+    "bootstrap": "^4.4.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "mutationobserver-shim": "^0.3.3",

src/App.vue

@@ -2,8 +2,8 @@
   <div id="app">
     <top-nav></top-nav>
     <div class="container-fluid">
-      <div class="row">
-        <left-nav></left-nav>
+      <div class="d-flex">
+        <left-nav class="flox-grow-1"></left-nav>
         <main-content></main-content>
       </div>
     </div>
@@ -11,9 +11,9 @@
 </template>
 
 <script>
-import MainContent from './components/MainContent.vue';
-import LeftNav from './components/LeftNav.vue';
-import TopNav from './components/TopNav.vue';
+import MainContent from './components/MainContent';
+import LeftNav from './components/LeftNav';
+import TopNav from './components/TopNav';
 
 export default {
 	name: 'app',

src/components/LeftNav.vue

@@ -1,6 +1,9 @@
 <template >
-    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
+    <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"/>
+            </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>
@@ -28,13 +31,16 @@ export default {
 	},
 	data() {
 		return {
-			masters: master_json.masters,
-			extraLinks: [
+		    links: [
 				{
 					id: 100,
 					icon: 'hiscores.png',
 					title: 'Account settings',
 				},
+			],
+			masters: master_json.masters,
+			extraLinks: [
+
 				{
 					id: 101,
 					icon: 'osrswiki.png',

src/components/MainContent.vue

@@ -1,11 +1,16 @@
 <template>
-  <main class="col-md-9 ml-sm-auto col-lg-10 px-4">
+  <main role="main" class="ml-sm-auto col-lg-10 px-4">
+    <section-content></section-content>
   </main>
 </template>
 
 <script>
+import SectionContent from "./TableSection";
 export default {
 	name: 'MainContent',
+	components: {
+	  SectionContent,
+	},
 	props: {
 		headerText: String
 	}
@@ -13,5 +18,13 @@ export default {
 </script>
 
 <style scoped>
+  [role="main"] {
+    padding-top: 133px; /* Space for fixed navbar */
+  }
 
+  @media (min-width: 768px) {
+    [role="main"] {
+      padding-top: 48px; /* Space for fixed navbar */
+    }
+  }
 </style>

src/components/TableSection.vue

@@ -0,0 +1,62 @@
+<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>
+            <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>
+        <div class="table-responsive">
+            <b-table striped hover :items="filtered_items"></b-table>
+        </div>
+    </section>
+</template>
+
+<script>
+
+export default {
+	name: "TableSection",
+	props: {
+	    tableData: Object,
+	},
+	data() {
+		return {
+		    total_weight: 100,
+			items: [
+				{ age_requirement: 40, first_name: 'Dickerson', last_name: 'Macdonald', combat_requirement: 10 },
+				{ age_requirement: 21, first_name: 'Larsen', last_name: 'Shaw', combat_requirement: 0 },
+				{ age_requirement: 89, first_name: 'Geneva', last_name: 'Wilson', combat_requirement: 50 },
+				{ age_requirement: 38, first_name: 'Jami', last_name: 'Carney', combat_requirement: 0 }
+			],
+			filters: {
+				age: 35,
+				combat_level: 49,
+			},
+			filtered_items: [],
+		}
+	},
+	methods: {
+	    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);
+			console.log(this.filtered_items)
+		},
+	},
+	mounted() {
+	    this.filterData();
+	},
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/TopNav.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow " role="navigation" aria-label="main navigation">
+    <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>
 
         <small class="text-white-50 font-italic">A calculator for slayer geeks that need to know percentages.</small>