31 lines
802 B
Vue

<template>
<v-app-bar fixed app color="primary" dark>
<v-btn to="/" text rounded>Simple Notes</v-btn>
<v-spacer />
<div v-if="isAuthenticated">
<v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
<v-btn class="mr-2" outlined>
Welcome {{ loggedInUser.username }}
</v-btn>
<v-btn outlined @click="logout">Logout</v-btn>
</div>
<v-btn v-else to="/account" text rounded>Account</v-btn>
</v-app-bar>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Navbar',
computed: {
...mapGetters(['isAuthenticated', 'loggedInUser']),
},
methods: {
async logout() {
await this.$auth.logout()
},
},
}
</script>