<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>
