user-menu

Summary

The avatar dropdown in the signed-in header.

Raw wireframe

• .context/designs/web/settings/user-menu.html

Why it is drawn this way

It is header state, not a route. isUserMenuOpen in header.tsx. It can open over any signed-in page; it is drawn once, over a bare "My Library" title.

The page under it is inert. A fixed inset-0 layer closes the menu on any outside click. So the underlay's links are spans, and the avatar links back to the library to stand for "close".

Four items, no admin. Profile, Account Connections, Active Sessions, Logout. There is no Admin entry even for an admin, and no billing or workspace entry.

Logout goes home. logout() in use-auth.ts clears state, toasts "Logged out successfully" and pushes /.

Not drawn. Below lg the avatar is replaced by a hamburger and MobileMenu. The set is drawn at 1440.

Related

• profile
• accounts
• sessions
• library

Sources

• packages/ui/src/components/layout/header.tsx
• packages/ui/src/hooks/use-auth.ts