+Vuex +ElementUI +Pug

- Log on now works, storing user profile in vuex state
- Templates in Pug = awesome

src/app/src/components/Navigation.vue

@@ -1,25 +1,41 @@
-<template>
-  <b-navbar toggleable type="inverse" variant="inverse" fixed="top">
-    <b-nav-toggle target="navCollapse"></b-nav-toggle>
-    <b-link class="navbar-brand" :to="{ name: 'Home' }">
-      <span style="font-weight:100;">my</span><span style="font-weight:600;">Prayer</span><span style="font-weight:700;">Journal</span>
-    </b-link>
-    <b-collapse is-nav id="navCollapse">
-      <b-nav is-nav-bar>
-        <b-nav-item v-if="auth.authenticated" :to="{ name: 'Dashboard' }">Dashboard</b-nav-item>
-        <b-nav-item v-if="auth.authenticated" @click="auth.logout()">Log Off</b-nav-item>
-        <b-nav-item v-if="!auth.authenticated" @click="auth.login()">Log On</b-nav-item>
-      </b-nav>
-    </b-collapse>
-  </b-navbar>
+<template lang="pug">
+  el-menu(theme="dark" mode="horizontal" class="mpj-top-nav" router=true)
+    el-menu-item(index="/")
+      span(style="font-weight:100;") my
+      span(style="font-weight:600;") Prayer
+      span(style="font-weight:700;") Journal
+    el-menu-item(v-if="isAuthenticated" index="/dashboard") Dashboard
+    el-menu-item(v-if="isAuthenticated" index="3"): a(@click.stop="logOff()") Log Off
+    el-menu-item(v-if="!isAuthenticated" index="4"): a(@click.stop="logOn()") Log On
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import AuthService from '@/auth/AuthService'
+
 export default {
   name: 'navigation',
-  props: ['auth'],
-  data: function () {
-    return { }
-  }
+  data () {
+    return {
+      auth0: new AuthService()
+    }
+  },
+  methods: {
+    logOn () {
+      this.auth0.login()
+    },
+    logOff () {
+      this.auth0.logout(this.$store, this.$router)
+    }
+  },
+  computed: mapState(['isAuthenticated'])
 }
 </script>
+
+<style scoped>
+.mpj-top-nav {
+  position: fixed;
+  top: 0px;
+  width: 100%;
+}
+</style>