53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import {useState, useRef, useEffect} from 'react'
|
|
import {useRouter} from 'next/navigation'
|
|
|
|
export default function ProfileDropdown() {
|
|
const [open, setOpen] = useState(false)
|
|
const dropdownRef = useRef<HTMLDivElement>(null)
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
|
setOpen(false)
|
|
}
|
|
}
|
|
|
|
document.addEventListener('mousedown', handleClickOutside)
|
|
return () => document.removeEventListener('mousedown', handleClickOutside)
|
|
}, [])
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await fetch('/logout', {method: 'POST'})
|
|
router.push('/') // Or a dedicated post-logout landing page
|
|
} catch (e) {
|
|
console.error('Logout failed', e)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="relative" ref={dropdownRef}>
|
|
<button
|
|
onClick={() => setOpen(!open)}
|
|
className="text-white font-medium px-4 py-2 hover:bg-zinc-800 rounded"
|
|
>
|
|
Profil ▾
|
|
</button>
|
|
|
|
{open && (
|
|
<div className="absolute right-0 mt-2 w-40 bg-white shadow-lg rounded z-50">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="block w-full text-left px-4 py-2 text-sm text-zinc-800 hover:bg-zinc-100"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|