49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
const { user, loading, fetchUser, logout } = useAuth()
|
|
|
|
// Cargar usuario al montar
|
|
onMounted(() => {
|
|
fetchUser()
|
|
})
|
|
|
|
const items = computed(() => [
|
|
[{
|
|
label: user.value?.email || 'Usuario',
|
|
slot: 'account',
|
|
disabled: true
|
|
}],
|
|
[{
|
|
label: 'Cerrar sesión',
|
|
icon: 'i-heroicons-arrow-right-on-rectangle',
|
|
click: logout
|
|
}]
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<UDropdownMenu
|
|
v-if="user?.authenticated && !loading"
|
|
:items="items"
|
|
:ui="{ item: { disabled: 'cursor-text select-text' } }"
|
|
:popper="{ placement: 'bottom-start' }"
|
|
>
|
|
<UAvatar
|
|
:alt="user.name || user.username || 'User'"
|
|
size="sm"
|
|
/>
|
|
|
|
<template #account="{ item }">
|
|
<div class="text-left">
|
|
<p class="font-medium text-gray-900 dark:text-white">
|
|
{{ user.name || user.username }}
|
|
</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 truncate">
|
|
{{ item.label }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</UDropdownMenu>
|
|
|
|
<USkeleton v-else-if="loading" class="h-8 w-8" :ui="{ rounded: 'rounded-full' }" />
|
|
</template>
|