45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
<script setup>
|
|
const auth = useAuthStore()
|
|
|
|
const userItems = computed(() => [[
|
|
{
|
|
label: 'Passwort aendern',
|
|
icon: 'i-heroicons-shield-check',
|
|
to: '/password-change'
|
|
},
|
|
{
|
|
label: 'Abmelden',
|
|
icon: 'i-heroicons-arrow-left-on-rectangle',
|
|
onSelect: async () => {
|
|
await auth.logout()
|
|
}
|
|
}
|
|
]])
|
|
</script>
|
|
|
|
<template>
|
|
<UDropdownMenu
|
|
:items="userItems"
|
|
:content="{ align: 'start', side: 'top', sideOffset: 8 }"
|
|
:ui="{ content: 'w-[var(--reka-dropdown-menu-trigger-width)] max-w-[var(--reka-dropdown-menu-trigger-width)]' }"
|
|
class="block w-full"
|
|
>
|
|
<template #default="{ open }">
|
|
<UButton
|
|
color="gray"
|
|
variant="ghost"
|
|
class="w-full min-w-0 justify-start gap-2 rounded-lg px-2.5 py-2 text-left"
|
|
:class="[open && 'bg-gray-100 dark:bg-gray-800']"
|
|
>
|
|
<span class="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-white">
|
|
{{ auth.user.email }}
|
|
</span>
|
|
|
|
<template #trailing>
|
|
<UIcon name="i-heroicons-ellipsis-vertical" class="h-5 w-5 shrink-0" />
|
|
</template>
|
|
</UButton>
|
|
</template>
|
|
</UDropdownMenu>
|
|
</template>
|