<template>
    <v-app-bar fixed app color="primary" dark>
        <v-btn to="/" text rounded>Simple Notes</v-btn>
        <v-spacer />
        <div v-if="isAuthenticated">
            <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
            <v-btn class="mr-2" outlined>
                Welcome {{ loggedInUser.username }}
            </v-btn>
            <v-btn outlined @click="logout">Logout</v-btn>
        </div>
        <v-btn v-else to="/account" text rounded>Account</v-btn>
    </v-app-bar>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'Navbar',
    computed: {
        ...mapGetters(['isAuthenticated', 'loggedInUser']),
    },
    methods: {
        async logout() {
            await this.$auth.logout()
        },
    },
}
</script>
