#945
Bar open state
A two-menu bar (Share, Insert) with a line reporting whether any menu is open through onOpenChange.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Bar open state" pattern (@codeatlasdev/ui demo #945, navigation/menubar) in my app.
Call get_demo({ ids: ["#945"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Reacting to the bar as a whole, for example dimming a canvas while a menu is open, without tracking each menu.
Keep these library parts, with the props and tokens the demo uses:
- DropdownMenuItem, Menubar, MenubarMenu from "@codeatlasdev/ui"
Behaviour to keep:
- `<Menubar aria-label="Document" onOpenChange={(o) => (open = o)}>` with two `MenubarMenu`s, Share and Insert
- `onOpenChange` fires when the bar goes from none open to one open and back, not when the pointer or arrows switch between menus
- A line reads "A menu is" followed by open or closed
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- DropdownMenuItem
@codeatlasdev/ui - Menubar
@codeatlasdev/ui - MenubarMenu
@codeatlasdev/ui
How it is built
- `<Menubar aria-label="Document" onOpenChange={(o) => (open = o)}>` with two `MenubarMenu`s, Share and Insert
- `onOpenChange` fires when the bar goes from none open to one open and back, not when the pointer or arrows switch between menus
- A line reads "A menu is" followed by open or closed
Related
Loading source.