You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.6 KiB
90 lines
2.6 KiB
<script setup lang="ts">
|
|
import { User, LogOut } from 'lucide-vue-next'
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from './ui/avatar'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from './ui/dropdown-menu'
|
|
|
|
const { user, logout } = useAuth()
|
|
|
|
/**
|
|
* Get user initials for Avatar fallback
|
|
* Example: "Bastian Masanek" → "BM"
|
|
*/
|
|
const userInitials = computed(() => {
|
|
if (!user.value) return '?'
|
|
|
|
const first = user.value.firstName?.charAt(0)?.toUpperCase() || ''
|
|
const last = user.value.lastName?.charAt(0)?.toUpperCase() || ''
|
|
|
|
return first + last || user.value.email?.charAt(0)?.toUpperCase() || '?'
|
|
})
|
|
|
|
/**
|
|
* Handle logout click
|
|
*/
|
|
async function handleLogout() {
|
|
try {
|
|
await logout()
|
|
} catch (error) {
|
|
console.error('Logout error:', error)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<button
|
|
class="flex items-center gap-2 rounded-full focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-experimenta-purple transition-all hover:scale-105 hover:shadow-lg"
|
|
aria-label="Benutzermenü öffnen"
|
|
>
|
|
<Avatar class="h-12 w-12 border-3 border-experimenta-accent shadow-md bg-experimenta-accent">
|
|
<AvatarImage :src="undefined" :alt="user?.firstName" />
|
|
<AvatarFallback class="bg-experimenta-accent text-white font-bold text-base flex items-center justify-center w-full h-full">
|
|
{{ userInitials }}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent align="end" class="w-56 z-[200]">
|
|
<!-- User email (non-interactive) -->
|
|
<DropdownMenuLabel class="font-normal">
|
|
<div class="flex flex-col space-y-1">
|
|
<p class="text-sm font-medium leading-none">
|
|
{{ user?.firstName }} {{ user?.lastName }}
|
|
</p>
|
|
<p class="text-xs leading-none text-muted-foreground">
|
|
{{ user?.email }}
|
|
</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<!-- Profile (disabled for now, placeholder for Phase 2+) -->
|
|
<DropdownMenuItem disabled>
|
|
<User class="mr-2 h-4 w-4" />
|
|
<span>Profil</span>
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
<!-- Logout -->
|
|
<DropdownMenuItem @click="handleLogout">
|
|
<LogOut class="mr-2 h-4 w-4" />
|
|
<span>Abmelden</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</template>
|
|
|