Add profile dropdown to marketplace header

marketplace/src/components/Header.tsx

@@ -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,20 +64,46 @@ export function Header() {
                     </nav>
 
                     {/* User info */}
-                    <div className="flex items-center gap-4">
+                    <div className="relative flex items-center gap-4" ref={dropdownRef}>
-                        <div className="hidden sm:block text-right">
+                        <button
-                            <Link to="/dashboard/profile" className="text-sm font-medium hover:underline">
+                            onClick={() => setIsOpen((prev) => !prev)}
-                                {user?.name}
+                            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"
-                            </Link>
+                        >
-                            <p className="text-xs text-white/70 capitalize">{user?.role}</p>
+                            <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="rounded-lg bg-red-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600"
+                                    className="w-full px-4 py-2 text-left text-red-600 hover:bg-red-50"
                                 >
                                     Sair
                                 </button>
                             </div>
+                        )}
+                    </div>
                 </div>
             </div>