diff --git a/marketplace/src/layouts/Shell.tsx b/marketplace/src/layouts/Shell.tsx index 0fc4353..6910a91 100644 --- a/marketplace/src/layouts/Shell.tsx +++ b/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(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 (
@@ -44,17 +60,51 @@ export function Shell({ children }: { children: React.ReactNode }) { Checkout - - Perfil da Empresa - {user && ( - +
+ + {isProfileOpen && ( +
+ {isOwner && ( + setIsProfileOpen(false)} + > + Perfil da Empresa + + )} + {isAdmin && ( + setIsProfileOpen(false)} + > + Meu Perfil + + )} + +
+ )} +
)}