43 lines
1.3 KiB
Vue
43 lines
1.3 KiB
Vue
<template>
|
|
<header class="border-b border-neutral-200 bg-primary-500 p-5 text-white">
|
|
<div class="flex h-full items-center justify-end">
|
|
<div class="flex gap-12 text-xl text-white">
|
|
<div class="group relative flex gap-4">
|
|
<Icon name="mdi:account-circle-outline" class="self-center cursor-pointer" size="36" />
|
|
<p class="self-center cursor-pointer">{{ user?.username }}</p>
|
|
<div class="invisible absolute right-0 top-full z-20 mt-2 w-44 rounded-md border border-neutral-200 bg-white py-1 text-sm text-neutral-800 opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100">
|
|
<button
|
|
type="button"
|
|
class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
|
|
>
|
|
Mon profil
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
|
|
@click="handleLogout"
|
|
>
|
|
Déconnexion
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { UserData } from '~/services/dto/user-data'
|
|
|
|
defineProps<{
|
|
user?: UserData
|
|
}>()
|
|
|
|
const auth = useAuthStore()
|
|
|
|
const handleLogout = async () => {
|
|
await auth.logout()
|
|
await navigateTo('/login')
|
|
}
|
|
</script>
|