65 lines
1.9 KiB
Vue
65 lines
1.9 KiB
Vue
<template>
|
|
<v-app-bar fixed app color="primary" dark>
|
|
<v-btn to="/" text rounded>Simple Notes</v-btn>
|
|
<v-btn to="/" text rounded>{{ $colorMode.value }}</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 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
|
|
localStorage.setItem(
|
|
'theme',
|
|
this.$vuetify.theme.dark ? 'dark' : 'light'
|
|
)
|
|
},
|
|
},
|
|
}
|
|
</script>
|