initial commit

src/components/partials/Nav.vue

@@ -0,0 +1,88 @@
+<template>
+  <nav class="navbar container" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="/">
+        <strong class="is-size-4">Animal Rescue League</strong>
+      </a>
+      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
+        data-target="navbarBasicExample">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+    <div id="navbar" class="navbar-menu">
+      <div class="navbar-start">
+        <router-link to="/" class="navbar-item">Home</router-link>
+        <router-link to="/about" class="navbar-item">About</router-link>
+      </div>
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <!-- Check that the SDK client is not currently loading before accessing is methods -->
+            <div v-if="!$auth.loading">
+              <!-- show login when not authenticated -->
+              <a v-if="!$auth.isAuthenticated" @click="login" class="button is-dark"><strong>Sign
+                  in</strong></a>
+              <!-- show logout when authenticated -->
+              <a v-if="$auth.isAuthenticated" @click="logout" class="button is-dark"><strong>Log
+                  out</strong></a>
+            </div>
+          </div>
+        </div>
+        <div class="navbar-item" id="live-time" v-if="timeReady">
+          {{ time }}
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+<script>
+import moment from 'moment'
+export default {
+  name: 'Nav',
+  data: () => {
+    return {
+      time: '',
+      timeReady: false,
+    }
+  },
+  methods: {
+    getTime() {
+      // console.log('Getting current time');
+      return moment().format('HH:mm:ss')
+    },
+    // Log the user in
+    login() {
+      this.$auth.loginWithRedirect();
+    },
+    // Log the user out
+    logout() {
+      this.$auth.logout({
+        returnTo: window.location.origin
+      });
+    }
+  },
+  mounted() {
+    setInterval(() => {
+      this.time = this.getTime(), 1000
+    });
+    this.timeReady = true;
+  }
+}
+</script>
+<style lang="scss">
+nav {
+  margin-top: 25px;
+  margin-bottom: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #d88d00;
+    }
+  }
+}
+</style>