<template>
    <div id="navbar">
        <!-- primary, success, info, warning, danger, dark, or light -->
        <b-navbar toggleable="lg" type="dark" variant="primary">
            <router-link to="/home"><b-navbar-brand>Mahjong</b-navbar-brand></router-link>

            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

            <b-collapse id="nav-collapse" is-nav>
                <b-navbar-nav class="ml-auto">
                    <b-navbar-nav>
                        <b-nav-item href="/#/home">Accueil</b-nav-item>
                    </b-navbar-nav>
                    
                    <b-nav-item-dropdown text="Jeu" right>
                        <b-dropdown-item><router-link to="/gameCreate">Créer une partie</router-link></b-dropdown-item>
                        <b-dropdown-item><router-link to="/gameJoin">Rejoindre une partie</router-link></b-dropdown-item>
                    </b-nav-item-dropdown>

                    <b-nav-item-dropdown text="Statistiques" right>
                        <b-dropdown-item><router-link to="">Mes statistiques</router-link></b-dropdown-item>
                        <b-dropdown-item><router-link to="">Meilleurs scores</router-link></b-dropdown-item>
                        <b-dropdown-item><router-link to="">Classement</router-link></b-dropdown-item>
                    </b-nav-item-dropdown>

                    <b-nav-item-dropdown :text="login" right>
                        <b-dropdown-item><router-link to="/profile">Profil</router-link></b-dropdown-item>
                        <b-dropdown-item @click="onClick"><router-link to="">Déconnexion</router-link></b-dropdown-item>
                    </b-nav-item-dropdown>
                </b-navbar-nav>
            </b-collapse>
        </b-navbar>
    </div>
</template>

<script>
    export default {
        name: 'Navbar',
        components: {},
        data() {
            return { login: localStorage.login}
        },
        methods: {
            onClick() {
                if (confirm("Etes-vous sûr de vouloir vous déconnecter ?")) {
                    localStorage.clear()
                    window.location.href = '/#/'
                }
            }
        }
    };
</script>

<style>
    div #navbar {
        padding-bottom: 50px;
    }
</style>