Feature/6-Add-Navbar

package.json

@@ -5,6 +5,8 @@
   "scripts": {
     "start": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
+    "icons": "vsvg -s src/assets/icons -t src/components/icons",
+    "prebuild": "npm run icons",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "pretest": "eslint --ignore-path .gitignore .",
@@ -13,18 +15,24 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "bootstrap": "^4.2.1",
+    "bootstrap-vue": "^2.0.0-rc.11",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-node": "^8.0.1",
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-standard": "^4.0.0",
+    "jquery": "^1.12.4",
+    "popper.js": "^1.14.6",
     "register-service-worker": "^1.5.2",
     "vue": "^2.5.22",
     "vue-class-component": "^6.0.0",
     "vue-property-decorator": "^7.3.0",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vue-svg-loader": "^0.11.0",
+    "vue-svgicon": "^3.2.2"
   },
   "devDependencies": {
-    "@types/jest": "^23.3.12",
+    "@types/jest": "^23.3.13",
     "@vue/cli-plugin-babel": "^3.3.0",
     "@vue/cli-plugin-e2e-nightwatch": "^3.3.0",
     "@vue/cli-plugin-pwa": "^3.3.0",
@@ -34,10 +42,10 @@
     "@vue/test-utils": "^1.0.0-beta.28",
     "acorn": "^6.0.5",
     "babel-core": "7.0.0-bridge.0",
-    "eslint": "^5.12.0",
+    "eslint": "^5.12.1",
     "eslint-config-standard": "^12.0.0",
     "ts-jest": "^23.0.0",
-    "typescript": "^3.0.0",
+    "typescript": "^3.2.4",
     "vue-template-compiler": "^2.5.22"
   }
 }

src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
+    <NavigationBar/>
     <router-view/>
   </div>
 </template>
 
+<script lang="ts">
+import axios from 'axios';
+import { Component, Vue } from 'vue-property-decorator';
+import NavigationBar from '@/components/NavigationBar.vue';
+
+@Component({
+  components: {
+    NavigationBar,
+  },
+})
+export default class App extends Vue {}
+</script>
+
 <style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
@@ -16,16 +26,6 @@
   text-align: center;
   color: #2c3e50;
 }
-#nav {
-  padding: 30px;
-}
 
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
+@import '~bootstrap/dist/css/bootstrap.css'
 </style>

src/components/NavigationBar.vue

+<template>
+  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
+    <div class="container">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <router-link to="/" class="navbar-brand">
+          <svgicon class="svg-icon" icon="srct" width="24" height="24" alt="SRCT"/>
+          BOOKSHARE 
+        </router-link>
+      </div>
+      <div class="navbar-collapse collapse" id="navbar">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item"><router-link to="/create_listing" class="nav-link">Create Listing</router-link></li>
+          <li class="nav-item"><router-link to="/all_listing" class="nav-link">Latest Listings</router-link></li>
+          <li class="nav-item"><router-link to="/about" class="nav-link">About</router-link></li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts">
+import '@/components/icons/srct';
+import { Component, Vue } from 'vue-property-decorator';
+
+export default class NavigationBar extends Vue {}
+</script>
+
+<style>
+.svg-icon {
+  padding-bottom: 5px;
+}
+</style>

src/components/icons/index.js

+/* eslint-disable */
+require('./heart')
+require('./srct')

src/main.ts

 import Vue from 'vue';
+import SvgIcon from 'vue-svgicon';
 import App from './App.vue';
 import router from './router';
 import './registerServiceWorker';
+import 'bootstrap';
 
 Vue.config.productionTip = false;
+Vue.use(SvgIcon);
 
 new Vue({
   router,

src/views/Home.vue

 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
-    <BeerList/>
   </div>
 </template>
 
 <script lang="ts">
 import axios from 'axios';
 import { Component, Vue } from 'vue-property-decorator';
-import BeerList from '@/components/BeerList.vue'; // @ is an alias to /src
+// import NavigationBar from '@/components/NavigationBar.vue'; // @ is an alias to /src
 
 @Component({
   components: {
-    BeerList,
+//    NavigationBar,
   },
 })
 export default class Home extends Vue {}

vue.config.js

@@ -7,5 +7,19 @@ module.exports = {
         secure: false
       }
     }
+  },
+  configureWebpack: {
+    module: {
+      rules: [
+        {
+          test: /\.svg$/,
+          use: [{
+            loader: 'html-loader',
+            options: {
+              minimize: true
+            }
+          }]
+        }]
+    }
   }
 }