89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<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>
|