ui/client/features/auth/components/UserMenu
Cockpit client (features), v0.8. Source: ui/client/features/auth/components/UserMenu.tsx.
Functions#
UserMenu()#
UserMenu(
__namedParameters):Element
Defined in: ui/client/features/auth/components/UserMenu.tsx:41
The signed-in account in the top bar: avatar, and a small popover with the login and Sign out. Presentation only (COMPONENT-*).
Deliberately a disclosure, not a menu. role="menu" promises arrow-key
roving focus, Home/End and type-ahead, none of which two items justify
implementing — and it would also make the login line an invalid child,
since role="menu" only permits menuitem/group/separator. Promising
a keyboard contract and not honouring it is worse for a screen-reader user
than an honest aria-haspopup="true" + aria-controls.
Dismissal is the shared useDismissable contract (docs/design/popovers.md): focus moves in on open, Escape closes and returns focus to the trigger, an outside click closes without stealing focus, Tab out closes, opening the project switcher closes it. There is deliberately no focus trap: trapping is for modals.
The avatar is a plain rather than next/image on purpose —
avatars.githubusercontent.com would otherwise need adding to
next.config.ts's remote patterns, and an optimiser round trip for one
22px picture buys nothing.
Props#
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
user |
`AuthUser | null` | Yes | — |
label |
string |
Yes | — | |
initial |
string |
Yes | — | |
open |
boolean |
Yes | — | |
onToggle |
() => void |
Yes | — | |
onClose |
() => void |
Yes | — | |
onSignOut |
() => void |
Yes | — | |
children |
ReactNode |
No | — | The preference rows another feature puts in the menu (Settings, Local model, Theme, Help; #368). |
Returns#
Element