Add profile dropdown to marketplace header

marketplace/src/layouts/Shell.tsx

@@ -1,12 +1,28 @@
+import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { useAuth } from '../context/AuthContext'
 
 export function Shell({ children }: { children: React.ReactNode }) {
   const { user, logout } = useAuth()
+  const [isProfileOpen, setIsProfileOpen] = useState(false)
+  const profileMenuRef = useRef<HTMLDivElement | null>(null)
 
   const isOwner = user?.role === 'owner' || user?.role === 'seller'
   const isAdmin = user?.role === 'admin'
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
+        setIsProfileOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
   return (
     <div className="min-h-screen bg-gray-100">
       <header className="flex items-center justify-between bg-medicalBlue px-6 py-4 text-white shadow-md">
@@ -44,17 +60,51 @@ export function Shell({ children }: { children: React.ReactNode }) {
           <Link to="/checkout" className="hover:underline">
             Checkout
           </Link>
-          <Link to="/company" className="hover:underline">
-            Perfil da Empresa
-          </Link>
           {user && (
-            <button
-              type="button"
-              onClick={logout}
-              className="rounded bg-white/10 px-3 py-1 text-xs font-semibold hover:bg-white/20"
-            >
-              Sair ({user.role})
-            </button>
+            <div className="relative" ref={profileMenuRef}>
+              <button
+                type="button"
+                onClick={() => setIsProfileOpen((prev) => !prev)}
+                className="flex items-center gap-2 rounded bg-white/10 px-3 py-1 text-xs font-semibold hover:bg-white/20"
+                aria-haspopup="true"
+                aria-expanded={isProfileOpen}
+              >
+                Perfil
+                <span className="text-[10px] font-normal uppercase text-white/80">{user.role}</span>
+                <svg className="h-3 w-3" 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>
+              {isProfileOpen && (
+                <div className="absolute right-0 mt-2 w-48 rounded-md bg-white py-1 text-sm text-gray-700 shadow-lg ring-1 ring-black/5">
+                  {isOwner && (
+                    <Link
+                      to="/company"
+                      className="block px-4 py-2 hover:bg-gray-100"
+                      onClick={() => setIsProfileOpen(false)}
+                    >
+                      Perfil da Empresa
+                    </Link>
+                  )}
+                  {isAdmin && (
+                    <Link
+                      to="/dashboard/profile"
+                      className="block px-4 py-2 hover:bg-gray-100"
+                      onClick={() => setIsProfileOpen(false)}
+                    >
+                      Meu Perfil
+                    </Link>
+                  )}
+                  <button
+                    type="button"
+                    onClick={logout}
+                    className="block w-full px-4 py-2 text-left text-red-600 hover:bg-red-50"
+                  >
+                    Sair
+                  </button>
+                </div>
+              )}
+            </div>
           )}
         </nav>
       </header>