From 95913578e9098a0b68b2c4bf11e7c6c7c935f7fd Mon Sep 17 00:00:00 2001
From: Tiago Yamamoto <japa@rede5.com.br>
Date: Tue, 23 Dec 2025 08:05:51 -0300
Subject: [PATCH] Add profile dropdown to marketplace header

---
 marketplace/src/components/Header.tsx | 62 ++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 10 deletions(-)

diff --git a/marketplace/src/components/Header.tsx b/marketplace/src/components/Header.tsx
index c39ad13..eb45926 100644
--- a/marketplace/src/components/Header.tsx
+++ b/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,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>