Krys4lide/frontend/components/NavBar.vue

<template>
    <div class="navbar">
        <div class="navbar-start">
            <a class="btn btn-ghost text-xl" href="/">Chrys4lide</a>
        </div>
        <nav class="navbar-center">
            <NuxtLink to="/" class="btn btn-ghost">Accueil</NuxtLink>
            <NuxtLink to="/CPS" class="btn btn-ghost">Carte CPS</NuxtLink>
            <NuxtLink to="/debug" class="btn btn-ghost">Debug</NuxtLink>
        </nav>
        <div class="navbar-end">
            <template v-if="!current_user">
                <button class="btn btn-ghost" type="button" onclick="login_modal.showModal()">
                    Connexion
                </button>
            </template>
            <template v-else>
                <details class="dropdown dropdown-end">
                    <summary class="block"><Avatar :user="current_user" class="w-12" role="button" /></summary>
                    <ul class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
                        <li><a @click="logout">Déconnexion</a></li>
                    </ul>
                </details>
            </template>
        </div>
    </div>
    <LoginModal />
</template>

<script setup lang="ts">
    const current_user = useCurrentUser();

    const logout = () => {
        current_user.value = null;
    };
</script>