66 lines
2.0 KiB
Vue
66 lines
2.0 KiB
Vue
<template>
|
|
<v-app-bar fixed app color="primary">
|
|
<v-btn to="/" text rounded>Simple Notes</v-btn>
|
|
<v-spacer />
|
|
<client-only>
|
|
<v-btn aria-label="theme switcher" icon @click="toggleTheme">
|
|
<v-icon
|
|
>{{ $vuetify.theme.dark ? mdiBrightness2 : mdiBrightness5 }}
|
|
</v-icon>
|
|
</v-btn>
|
|
</client-only>
|
|
<v-menu transition="scroll-y-transition" offset-y 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>
|
|
<client-only>
|
|
<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>
|
|
</client-only>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-app-bar>
|
|
</template>
|
|
|
|
<script>
|
|
import { mdiDotsVertical, mdiBrightness5, mdiBrightness2 } from '@mdi/js'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'Navbar',
|
|
data: () => ({
|
|
mdiDotsVertical,
|
|
mdiBrightness5,
|
|
mdiBrightness2,
|
|
}),
|
|
computed: {
|
|
...mapGetters(['isAuthenticated', 'loggedInUser']),
|
|
},
|
|
methods: {
|
|
async logout() {
|
|
await this.$auth.logout()
|
|
},
|
|
toggleTheme() {
|
|
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
|
|
const theme = this.$vuetify.theme.dark ? 'dark' : 'light'
|
|
localStorage.setItem('theme', theme)
|
|
this.$cookies.set('theme', theme, {
|
|
path: '/',
|
|
maxAge: 60 * 60 * 24 * 7,
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|