base layout, data, components

src/App.vue

@@ -1,27 +1,38 @@
 <template>
   <div id="app">
-    <navbar></navbar>
-    <main-content headerText="test message"></main-content>
+    <top-nav></top-nav>
+    <div class="container-fluid">
+      <div class="row">
+        <left-nav></left-nav>
+        <main-content></main-content>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import MainContent from './components/MainContent.vue';
-import Navbar from './components/Navbar.vue';
+import LeftNav from './components/LeftNav.vue';
+import TopNav from './components/TopNav.vue';
 
 export default {
-  name: 'app',
-  components: {
-    MainContent,
-    Navbar,
-  }
+	name: 'app',
+	components: {
+		MainContent,
+		LeftNav,
+		TopNav,
+	}
 }
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+body {
+  font-size: .875rem;
+}
 </style>

src/assets/runescape-icon.png

@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 23.980469 2.007813 C 20.128906 2.09375 16.410156 3.148438 13.316406 5 L 19 5 C 23.417969 5 29 6.625 29 12 C 29 14.90625 27.96875 18.25 25 20 C 25.355469 20.855469 25.644531 21.269531 26 22 C 26.65625 20.59375 29.125 19.046875 31 19 L 39 19 L 39 26 C 38.882813 26 38.855469 25.980469 38.828125 25.863281 C 38.40625 24.125 35.75 22 32.5 22 C 31 22 30 22.808594 30 24 C 30 25.386719 30.828125 26.023438 32 27 C 33.617188 28.347656 37.253906 30.773438 38.035156 31.234375 C 39.789063 32.265625 41.332031 33.734375 41.832031 35.738281 C 41.972656 36.308594 42.027344 36.90625 41.996094 37.5 L 42 37.5 L 42 38.605469 C 47.789063 31.75 49.484375 19.660156 41.988281 10.371094 C 37.164063 4.390625 30.394531 1.859375 23.980469 2.007813 Z M 10.714844 6.757813 C 5.570313 10.589844 2.007813 17.082031 2.007813 24 C 2.007813 27.925781 2.835938 32 5.050781 35.847656 C 6.660156 38.652344 8.800781 40.980469 11.425781 42.859375 C 14.042969 44.734375 16.933594 45.980469 20.085938 46.617188 C 21.40625 46.882813 23.265625 47 25 47 C 22.90625 45.625 21 43.40625 21 40 C 21 36.03125 23.742188 34 26 34 C 26.871094 34.023438 28 34.28125 28 35.5 C 28 37.5625 25.644531 38 25 38 C 24.4375 38 24 39.355469 24 40.5 C 24 42.273438 25.359375 43.433594 26.925781 44.160156 C 29.121094 45.179688 31.050781 45.1875 33.3125 44.375 C 34.347656 44.003906 35.261719 43.410156 35.902344 42.5 C 37.214844 40.640625 37.34375 38.53125 35.796875 36.652344 C 34.9375 35.613281 33.832031 34.71875 32.652344 34.0625 C 30.4375 32.835938 28.570313 31.605469 26.585938 30.011719 C 24.628906 28.4375 22.753906 26.792969 21.257813 24.761719 C 20.171875 23.289063 19.339844 21.699219 18.984375 19.882813 C 18.902344 19.46875 18.902344 19.46875 19.324219 19.40625 C 20.683594 19.203125 21.808594 18.566406 22.664063 17.496094 C 23.789063 16.089844 24 14.832031 24 13 C 24 10.792969 22.46875 8.59375 20.347656 7.527344 C 19.28125 6.992188 18.140625 6.867188 16.980469 7.1875 C 16.4375 7.339844 16 7.441406 16 8 L 16 29.5625 C 16 30.871094 16.835938 31.199219 17.984375 31.796875 C 18.070313 31.847656 18.160156 31.894531 18.25 31.945313 C 18.242188 31.964844 18.234375 31.980469 18.226563 32 L 9.03125 32 C 9.144531 31.878906 9.273438 31.808594 9.398438 31.738281 C 10.21875 31.277344 11 30.523438 11 29.5625 L 11 8 C 11 7.679688 10.804688 7.089844 10.714844 6.757813 Z"/></svg>

src/components/LeftNav.vue

@@ -0,0 +1,100 @@
+<template >
+    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
+        <div class="sidebar-sticky">
+            <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"/>
+            </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"/>
+            </ul>
+        </div>
+    </nav>
+</template>
+
+<script>
+import master_json from "../data/masters";
+import NavItem from "./NavItem";
+
+export default {
+	name: "LeftNav",
+	components: {
+		NavItem
+	},
+	data() {
+		return {
+			masters: master_json.masters,
+			extraLinks: [
+				{
+					id: 100,
+					icon: 'hiscores.png',
+					title: 'Account settings',
+				},
+				{
+					id: 101,
+					icon: 'osrswiki.png',
+					title: 'OSRS Wiki',
+				},
+			]
+		}
+	},
+}
+
+</script>
+
+<style scoped>
+    .sidebar {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 100; /* Behind the navbar */
+        padding: 48px 0 0; /* Height of navbar */
+        box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+    }
+
+    .sidebar-sticky {
+        position: relative;
+        top: 0;
+        height: calc(100vh - 48px);
+        padding-top: .5rem;
+        overflow-x: hidden;
+        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+    }
+
+    @supports ((position: -webkit-sticky) or (position: sticky)) {
+        .sidebar-sticky {
+            position: -webkit-sticky;
+            position: sticky;
+        }
+    }
+
+    .sidebar .nav-link {
+        font-weight: 500;
+        color: #333;
+    }
+
+    .sidebar .nav-link .feather {
+        margin-right: 4px;
+        color: #999;
+    }
+
+    .sidebar .nav-link.active {
+        color: #007bff;
+    }
+
+    .sidebar .nav-link:hover .feather,
+    .sidebar .nav-link.active .feather {
+        color: inherit;
+    }
+
+    .sidebar-heading {
+        font-size: .75rem;
+        text-transform: uppercase;
+    }
+</style>

src/components/MainContent.vue

@@ -1,15 +1,14 @@
 <template>
-  <div class="hello">
-    <h1>{{ headerText }}</h1>
-  </div>
+  <main class="col-md-9 ml-sm-auto col-lg-10 px-4">
+  </main>
 </template>
 
 <script>
 export default {
-  name: 'MainContent',
-  props: {
-    headerText: String
-  }
+	name: 'MainContent',
+	props: {
+		headerText: String
+	}
 }
 </script>
 

src/components/NavItem.vue

@@ -0,0 +1,28 @@
+<template>
+    <li class="nav-item">
+        <a class="nav-link" 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>
+        </a>
+    </li>
+</template>
+
+<script>
+export default {
+	name: "NavItem",
+	data() {
+		return {
+			isActive: false,
+		}
+	},
+	props: {
+		id: Number,
+		icon_url: String,
+		title: String,
+	}
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Navbar.vue

@@ -1,25 +0,0 @@
-<template>
-    <nav class="navbar" role="navigation" aria-label="main navigation">
-        <div class="navbar-brand">
-            <a class="navbar-item">
-                <img src="/src/assets/galvek.webp">
-            </a>
-        </div>
-        <div class="navbar-menu">
-            <div class="navbar-start">
-            </div>
-            <div class="navbar-end">
-            </div>
-        </div>
-    </nav>
-</template>
-
-<script>
-    export default {
-        name: "Navbar"
-    }
-</script>
-
-<style scoped>
-
-</style>

src/components/TopNav.vue

@@ -0,0 +1,38 @@
+<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>
+
+        <small class="text-white-50 font-italic">A calculator for slayer geeks that need to know percentages.</small>
+
+        <ul class="navbar-nav px-3">
+            <li class="nav-item text-nowrap">
+                <a class="nav-link" href="https://github.com/bartvdbraak/slayweightcalc">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="20" class="m-1" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path></svg>
+                    Github
+                </a>
+            </li>
+        </ul>
+    </nav>
+</template>
+
+<script>
+export default {
+	name: "Navbar"
+}
+</script>
+
+<style scoped>
+    .navbar-brand {
+        padding-top: .75rem;
+        padding-bottom: .75rem;
+        font-size: 1rem;
+        background-color: rgba(0, 0, 0, .25);
+        box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+    }
+
+    .navbar {
+        padding: .75rem 1rem;
+        border-width: 0;
+        border-radius: 0;
+    }
+</style>

src/data/masters.json

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

src/main.js

@@ -1,8 +1,11 @@
+import '@babel/polyfill'
+import 'mutationobserver-shim'
 import Vue from 'vue'
+import './plugins/bootstrap-vue'
 import App from './App.vue'
 
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App),
+	render: h => h(App),
 }).$mount('#app')

src/plugins/bootstrap-vue.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+
+import BootstrapVue from 'bootstrap-vue'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+Vue.use(BootstrapVue)