Create Menu Navbar Block for React

Edit WORK, TEAM and TEMPLATES at the top of the file: each row is a label, an icon, a value and, for the first two groups, the hint key. The menu, the key handler and the phone drawer all read the same arrays, so they never drift apart. Replace pick (and the key handler's setLast) with the call that really creates the thing; the line in the bar and the status then say what happened.

Yes, outside the menu. A key with no modifier, pressed when focus isn't in a field and no menu or dialog is open, does what its row does. Shift, Ctrl, Alt and Cmd combinations are left to the browser. With the menu open the keys are the menu's own type-ahead (the first row starting with the letter takes focus), so a stray letter never creates anything. On a phone the drawer shows no hints: there's no keyboard to teach.

The links sit in a nav landmark named Main, after the wordmark (a link home). Create says whether its menu is expanded; the groups are named Work and Team, the submenu row says it has a popup, and a polite status reads "Created: New task" after a choice. Enter, Space or the Down arrow opens the menu with focus on the first row; the arrows, Home and End move between rows, the Right arrow opens the templates, the Left arrow closes them, and Escape closes the templates first, then the menu. Choosing a row and Escape both return focus to Create.

Below the md breakpoint the wordmark, Create and a menu button stay on the bar, and nothing wraps at 320 pixels: Create keeps its plus (its name stays "Create" for screen readers) and the status line is read but not drawn. Create opens a drawer from the bottom with a grabber, three groups of rows (Work, Team, New from template) with large touch targets. Focus moves into the drawer and stays there; Escape, a swipe down, a tap outside it or choosing a row closes it, and focus goes back to Create. The menu button opens a sheet from the top with the four links.

Yes. The bar mirrors, the menu opens under Create's start edge, key hints and the submenu arrow follow the direction, and the submenu opens toward the end when the start side has no room. The wordmark is artwork and keeps its direction. Wrap the block in your direction provider (the catalog's DirectionProvider) so the menu follows the page.

Nothing moves on load. A band of light sweeps across Create once on hover and keyboard focus, the menu opens with the library's fade, and the drawer and the sheet slide in. With reduced motion the light fades in where it stands and the drawer and the sheet appear without sliding.