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

Merge pull request #43 from rede5/codex/add-unified-profile-dropdown-in-navbar

Browse source 
Unified profile dropdown in marketplace header
This commit is contained in:
Tiago Yamamoto 2025-12-23 11:49:13 -03:00 committed by GitHub
commit 79e115784a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 27 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
marketplace/src/layouts/Shell.tsx
View file

@ -9,6 +9,8 @@ export function Shell({ children }: { children: React.ReactNode }) {
const isOwner = user?.role === 'owner' || user?.role === 'seller' const isOwner = user?.role === 'owner' || user?.role === 'seller'
const isAdmin = user?.role === 'admin' const isAdmin = user?.role === 'admin'
const profilePath = isAdmin ? '/dashboard/profile' : '/meu-perfil'
const settingsPath = isOwner ? '/company' : '/dashboard/profile'
useEffect(() => { useEffect(() => {
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
@ -61,49 +63,41 @@ export function Shell({ children }: { children: React.ReactNode }) {
Checkout Checkout
</Link> </Link>
{user && ( {user && (
<div className="relative" ref={profileMenuRef}> <div className="relative flex items-center" ref={profileMenuRef}>
<button <button
type="button" type="button"
onClick={() => setIsProfileOpen((prev) => !prev)} 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 whitespace-nowrap" className="flex items-center gap-3 rounded bg-white/10 px-3 py-2 text-left text-xs font-semibold hover:bg-white/20 whitespace-nowrap"
aria-haspopup="true" aria-haspopup="true"
aria-expanded={isProfileOpen} aria-expanded={isProfileOpen}
> >
Perfil <div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-[11px] font-bold">
<span className="text-[10px] font-normal uppercase text-white/80">{user.role}</span> {user.name.charAt(0).toUpperCase()}
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> </div>
<div className="flex flex-col items-start leading-tight">
<span className="text-sm font-semibold">{user.name}</span>
<span className="text-[10px] uppercase text-white/80">{user.role}</span>
</div>
<svg className="h-3 w-3 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg> </svg>
</button> </button>
{isProfileOpen && ( {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"> <div className="absolute right-0 top-full z-50 mt-2 w-52 rounded-md bg-white py-2 text-sm text-gray-700 shadow-lg">
{isOwner && ( <Link
<Link to={profilePath}
to="/meu-perfil" className="block px-4 py-2 hover:bg-gray-100"
className="block px-4 py-2 hover:bg-gray-100" onClick={() => setIsProfileOpen(false)}
onClick={() => setIsProfileOpen(false)} >
> Ver Perfil
Meu Perfil </Link>
</Link> <Link
)} to={settingsPath}
{isOwner && ( className="block px-4 py-2 hover:bg-gray-100"
<Link onClick={() => setIsProfileOpen(false)}
to="/company" >
className="block px-4 py-2 hover:bg-gray-100" Configurações
onClick={() => setIsProfileOpen(false)} </Link>
>
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 <button
type="button" type="button"
onClick={logout} onClick={logout}