127 lines
3.8 KiB
Vue
127 lines
3.8 KiB
Vue
<template>
|
|
<div>
|
|
<v-navigation-drawer v-model="drawer" clipped fixed app color="primary">
|
|
<client-only>
|
|
<v-list-item v-if="loggedIn">
|
|
<v-list-item-avatar>
|
|
<v-icon>{{ mdiAccount }}</v-icon>
|
|
</v-list-item-avatar>
|
|
|
|
<v-list-item-content>
|
|
<v-list-item-title>
|
|
{{ $auth.$state.user.username }}
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-divider />
|
|
<v-list>
|
|
<v-list-item
|
|
v-for="(item, i) in items"
|
|
:key="i"
|
|
:to="item.to"
|
|
router
|
|
nuxt
|
|
exact
|
|
>
|
|
<v-list-item-action>
|
|
<v-icon>{{ item.icon }}</v-icon>
|
|
</v-list-item-action>
|
|
<v-list-item-content>
|
|
<v-list-item-title v-text="item.title" />
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
</client-only>
|
|
<template v-slot:append>
|
|
<client-only>
|
|
<div class="pa-2">
|
|
<v-btn
|
|
v-if="loggedIn"
|
|
block
|
|
color="secondary"
|
|
@click.stop="logout"
|
|
>
|
|
Logout
|
|
</v-btn>
|
|
<v-btn v-else block color="secondary" to="/account">
|
|
Login
|
|
</v-btn>
|
|
</div>
|
|
</client-only>
|
|
</template>
|
|
</v-navigation-drawer>
|
|
|
|
<v-app-bar clipped-left fixed app color="primary">
|
|
<v-app-bar-nav-icon @click.stop="drawer = !drawer">
|
|
<v-icon>{{ mdiMenu }}</v-icon>
|
|
</v-app-bar-nav-icon>
|
|
<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-app-bar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mdiMenu,
|
|
mdiBrightness5,
|
|
mdiBrightness2,
|
|
mdiPencil,
|
|
mdiHome,
|
|
mdiAccount,
|
|
} from '@mdi/js'
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'Navbar',
|
|
data: () => ({
|
|
mdiMenu,
|
|
mdiBrightness5,
|
|
mdiBrightness2,
|
|
mdiAccount,
|
|
drawer: false,
|
|
items: [
|
|
{
|
|
icon: mdiHome,
|
|
title: 'Welcome',
|
|
to: '/',
|
|
},
|
|
{
|
|
icon: mdiPencil,
|
|
title: 'Notes',
|
|
to: '/notes',
|
|
},
|
|
],
|
|
}),
|
|
computed: {
|
|
...mapState('auth', ['loggedIn']),
|
|
},
|
|
methods: {
|
|
async logout() {
|
|
this.$store.commit('notes/clear')
|
|
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>
|