add shell (navbar)

views/src/components/shell/shell.vue

@@ -0,0 +1,38 @@
+<template>
+  <div id="shell">
+    <b-navbar toggleable="lg" type="dark" variant="dark">
+    <b-navbar-brand href="#">Monitoring</b-navbar-brand>
+
+    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+    <b-collapse id="nav-collapse" is-nav>
+      <b-navbar-nav>
+        <b-nav-item href="#">Link</b-nav-item>
+        <b-nav-item href="#" disabled>Disabled</b-nav-item>
+      </b-navbar-nav>
+
+      <!-- Right aligned nav items -->
+      <b-navbar-nav class="ml-auto">
+        <b-nav-form>
+          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
+        </b-nav-form>
+
+        <b-nav-item-dropdown right>
+          <!-- Using 'button-content' slot -->
+          <template #button-content>
+            <em>User</em>
+          </template>
+          <b-dropdown-item href="#">Profile</b-dropdown-item>
+          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
+        </b-nav-item-dropdown>
+      </b-navbar-nav>
+    </b-collapse>
+  </b-navbar>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'shell'
+  }
+</script>

views/src/index.js

@@ -1,5 +1,5 @@
 import Vue from "vue";
-import App from "./components/App.vue";
+import Shell from "./components/shell/shell.vue";
 import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
 
 Vue.config.productionTip = false;
@@ -12,5 +12,5 @@ Vue.use(IconsPlugin);
 
 new Vue({
   el: "#app",
-  render: h => h(App)
+  render: h => h(Shell)
 });