46 lines
1.2 KiB
Vue
46 lines
1.2 KiB
Vue
<template>
|
|
<v-app-bar fixed app color="primary" dark>
|
|
<v-btn to="/" text rounded>Simple Notes</v-btn>
|
|
<v-spacer />
|
|
<v-menu bottom left>
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn aria-label="menu" icon v-on="on">
|
|
<v-icon>{{ mdiDotsVertical }}</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
|
|
<v-list>
|
|
<v-list-item v-if="isAuthenticated" to="/notes">
|
|
My notes
|
|
</v-list-item>
|
|
<v-list-item v-if="isAuthenticated" @click="logout">
|
|
Logout
|
|
</v-list-item>
|
|
<v-list-item v-else>
|
|
<v-btn to="/account" text rounded>Account</v-btn>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-app-bar>
|
|
</template>
|
|
|
|
<script>
|
|
import { mdiDotsVertical } from '@mdi/js'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'Navbar',
|
|
computed: {
|
|
...mapGetters(['isAuthenticated', 'loggedInUser']),
|
|
},
|
|
data: () => ({
|
|
mdiDotsVertical,
|
|
}),
|
|
methods: {
|
|
async logout() {
|
|
await this.$auth.logout()
|
|
},
|
|
},
|
|
}
|
|
</script>
|