Merge pull request #43 from rede5/codex/add-unified-profile-dropdown-in-navbar
Unified profile dropdown in marketplace header
This commit is contained in:
commit
79e115784a
1 changed files with 27 additions and 33 deletions
|
|
@ -9,6 +9,8 @@ export function Shell({ children }: { children: React.ReactNode }) {
|
|||
|
||||
const isOwner = user?.role === 'owner' || user?.role === 'seller'
|
||||
const isAdmin = user?.role === 'admin'
|
||||
const profilePath = isAdmin ? '/dashboard/profile' : '/meu-perfil'
|
||||
const settingsPath = isOwner ? '/company' : '/dashboard/profile'
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
|
|
@ -61,49 +63,41 @@ export function Shell({ children }: { children: React.ReactNode }) {
|
|||
Checkout
|
||||
</Link>
|
||||
{user && (
|
||||
<div className="relative" ref={profileMenuRef}>
|
||||
<div className="relative flex items-center" 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 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-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">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-[11px] font-bold">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</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" />
|
||||
</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 && (
|
||||
<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">
|
||||
<Link
|
||||
to="/meu-perfil"
|
||||
to={profilePath}
|
||||
className="block px-4 py-2 hover:bg-gray-100"
|
||||
onClick={() => setIsProfileOpen(false)}
|
||||
>
|
||||
Meu Perfil
|
||||
Ver Perfil
|
||||
</Link>
|
||||
)}
|
||||
{isOwner && (
|
||||
<Link
|
||||
to="/company"
|
||||
to={settingsPath}
|
||||
className="block px-4 py-2 hover:bg-gray-100"
|
||||
onClick={() => setIsProfileOpen(false)}
|
||||
>
|
||||
Perfil da Empresa
|
||||
Configurações
|
||||
</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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue