feat: basic initial UI layout for mobile and desktop
This commit is contained in:
Jose Selesan
174
apps/web/src/components/layout/UserMenu.tsx
Normal file
174
apps/web/src/components/layout/UserMenu.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { Link, useNavigate } from '@tanstack/react-router'
|
||||
import { ChevronDown, LogOut, Settings, UserRound, X } from 'lucide-react'
|
||||
import { cn } from '../../lib/utils'
|
||||
import { signOut } from '../../lib/auth-client'
|
||||
import { useAuth } from '../../context/AuthProvider'
|
||||
import { useIsMobile } from '../../hooks/useIsMobile'
|
||||
import { Avatar } from '../ui'
|
||||
|
||||
const itemClass =
|
||||
'flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium text-primary transition-colors hover:bg-primary-soft'
|
||||
|
||||
export function UserMenu() {
|
||||
const { user } = useAuth()
|
||||
const isMobile = useIsMobile()
|
||||
const [open, setOpen] = useState(false)
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || isMobile) return
|
||||
const handlePointerDown = (event: PointerEvent) => {
|
||||
if (ref.current && !ref.current.contains(event.target as Node)) setOpen(false)
|
||||
}
|
||||
document.addEventListener('pointerdown', handlePointerDown)
|
||||
return () => document.removeEventListener('pointerdown', handlePointerDown)
|
||||
}, [open, isMobile])
|
||||
|
||||
useEffect(() => {
|
||||
if (isMobile && open) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
return () => {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
}, [isMobile, open])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') setOpen(false)
|
||||
}
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
return () => document.removeEventListener('keydown', handleKeyDown)
|
||||
}, [open])
|
||||
|
||||
const handleSignOut = async () => {
|
||||
setOpen(false)
|
||||
await signOut({ fetchOptions: { headers: { 'Cache-Control': 'no-cache' } } })
|
||||
navigate({ to: '/login' })
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={ref} className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={open}
|
||||
className="flex items-center gap-2 rounded-xl p-1 transition-colors hover:bg-primary-soft"
|
||||
>
|
||||
<Avatar name={user?.name} src={user?.image ?? undefined} className="size-8 lg:size-9" />
|
||||
<span className="hidden max-w-40 flex-col items-start leading-tight lg:flex">
|
||||
<span className="truncate text-sm font-medium text-primary">{user?.name ?? 'Usuario'}</span>
|
||||
</span>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
'hidden size-4 text-foreground/50 transition-transform lg:block',
|
||||
open && 'rotate-180',
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{isMobile
|
||||
? open
|
||||
? createPortal(
|
||||
<div role="dialog" aria-modal="true" className="fixed inset-0 z-50 lg:hidden">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 animate-fade-in bg-black/20 backdrop-blur-sm"
|
||||
onClick={() => setOpen(false)}
|
||||
/>
|
||||
<div className="absolute inset-0 flex animate-fade-in flex-col overflow-y-auto bg-white/90 backdrop-blur">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(false)}
|
||||
aria-label="Cerrar menú"
|
||||
className="absolute right-4 top-4 z-20 rounded-full bg-white/90 p-2 text-foreground/70 shadow-md backdrop-blur transition-colors hover:bg-white"
|
||||
>
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
<div className="flex min-h-full flex-col items-center justify-center gap-8 px-6 py-12">
|
||||
<div className="flex flex-col items-center gap-3 text-center">
|
||||
<Avatar
|
||||
name={user?.name}
|
||||
src={user?.image ?? undefined}
|
||||
className="size-16 text-xl"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-base font-semibold text-primary">
|
||||
{user?.name ?? 'Usuario'}
|
||||
</p>
|
||||
<p className="text-sm text-foreground/50">{user?.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full space-y-1.5 rounded-2xl border border-border/60 bg-white/90 p-2 shadow-xl backdrop-blur">
|
||||
<Link
|
||||
role="menuitem"
|
||||
to="/profile"
|
||||
onClick={() => setOpen(false)}
|
||||
className={cn(itemClass, 'py-3.5')}
|
||||
>
|
||||
<UserRound className="size-5 text-foreground/60" />
|
||||
Mi perfil
|
||||
</Link>
|
||||
<Link
|
||||
role="menuitem"
|
||||
to="/settings"
|
||||
onClick={() => setOpen(false)}
|
||||
className={cn(itemClass, 'py-3.5')}
|
||||
>
|
||||
<Settings className="size-5 text-foreground/60" />
|
||||
Ajustes
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={handleSignOut}
|
||||
className={cn(
|
||||
itemClass,
|
||||
'w-full justify-center border border-border bg-white/90 py-3.5 shadow-sm backdrop-blur hover:bg-primary-soft',
|
||||
)}
|
||||
>
|
||||
<LogOut className="size-5 text-foreground/60" />
|
||||
Cerrar sesión
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
: null
|
||||
: open ? (
|
||||
<div
|
||||
role="menu"
|
||||
className="absolute right-0 top-full z-50 mt-2 w-60 rounded-xl border border-border bg-white p-1.5 shadow-lg"
|
||||
>
|
||||
<div className="px-3 py-2">
|
||||
<p className="truncate text-sm font-semibold text-primary">{user?.name ?? 'Usuario'}</p>
|
||||
<p className="truncate text-xs text-foreground/50">{user?.email}</p>
|
||||
</div>
|
||||
<div className="mx-3 my-1 h-px bg-border" />
|
||||
<Link role="menuitem" to="/profile" onClick={() => setOpen(false)} className={itemClass}>
|
||||
<UserRound className="size-4 text-foreground/60" />
|
||||
Mi perfil
|
||||
</Link>
|
||||
<Link role="menuitem" to="/settings" onClick={() => setOpen(false)} className={itemClass}>
|
||||
<Settings className="size-4 text-foreground/60" />
|
||||
Ajustes
|
||||
</Link>
|
||||
<div className="mx-3 my-1 h-px bg-border" />
|
||||
<button type="button" role="menuitem" onClick={handleSignOut} className={itemClass}>
|
||||
<LogOut className="size-4 text-foreground/60" />
|
||||
Cerrar sesión
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user