rede5/saveinmed
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add profile dropdown to marketplace header

Browse source
This commit is contained in:
Tiago Yamamoto 2025-12-23 08:05:51 -03:00
parent 6719ec6298
commit 95913578e9
1 changed files with 52 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
marketplace/src/components/Header.tsx
View file

@ -1,3 +1,4 @@
import { useEffect, useRef, useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
@ -14,6 +15,21 @@ const navItems = [
export function Header() {
const { user, logout } = useAuth()
const location = useLocation()
const [isOpen, setIsOpen] = useState(false)
const dropdownRef = useRef<HTMLDivElement>(null)
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
setIsOpen(false)
}
}
document.addEventListener('mousedown', handleClickOutside)
return () => {
document.removeEventListener('mousedown', handleClickOutside)
}
}, [])
return (
<header className="bg-gradient-to-r from-blue-900 to-blue-700 text-white shadow-lg">
@ -48,19 +64,45 @@ export function Header() {
</nav>
{/* User info */}
<div className="flex items-center gap-4">
<div className="hidden sm:block text-right">
<Link to="/dashboard/profile" className="text-sm font-medium hover:underline">
{user?.name}
</Link>
<p className="text-xs text-white/70 capitalize">{user?.role}</p>
</div>
<div className="relative flex items-center gap-4" ref={dropdownRef}>
<button
onClick={logout}
className="rounded-lg bg-red-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600"
onClick={() => setIsOpen((prev) => !prev)}
className="flex items-center gap-2 rounded-lg bg-white/10 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-white/20"
>
Sair
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-xs font-semibold">
{(user?.name || 'U').charAt(0).toUpperCase()}
</div>
<div className="hidden sm:flex flex-col items-start">
<span className="text-sm font-medium">{user?.name}</span>
<span className="text-xs text-white/70 capitalize">{user?.role}</span>
</div>
<svg
className="h-4 w-4 text-white/70"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{isOpen && (
<div className="absolute right-0 top-full mt-2 w-48 rounded-lg bg-white py-2 text-sm text-gray-700 shadow-lg">
<Link
to="/dashboard/profile"
className="block px-4 py-2 hover:bg-gray-100"
onClick={() => setIsOpen(false)}
>
Meu perfil
</Link>
<button
onClick={logout}
className="w-full px-4 py-2 text-left text-red-600 hover:bg-red-50"
>
Sair
</button>
</div>
)}
</div>
</div>
</div>