Account Menu Navbar Block for React

Edit ACCOUNTS at the top of the file (an id, a name, an email, initials, a plan, and the gigabytes used and the quota) and PAGES and ENTRIES for the bar's links and the menu's links. The storage bar's width and the "9.3 of 15 GB used" line both come from the current account's two numbers, so they can't disagree. The household's name in HOUSEHOLD is plain text; make it a switcher with the Workspace Switcher block if you need one.

It sets the current account in the block's state: the header, the button's avatar and its name follow, the radio list moves its check, and a polite status says "Switched to Tomás Okafor." The button's name is drawn over a hidden copy of each account's name, so the bar keeps its width whoever is signed in. Nothing is stored and nothing is sent: wire the choice to your session. Focus goes back to the account button, with the keyboard or the pointer.

The links sit in a nav landmark named Main, after the wordmark (a link home). The account button is named "Dana Okafor account menu" and says whether it's expanded. The menu's groups are named (the identity header, Switch account) and its links are menu items. Enter, Space or the Down arrow opens the menu with focus on the first row; the arrow keys, Home and End move between rows, Enter chooses and Escape closes it. Escape and choosing a row both return focus to the account button.

Below the md breakpoint the wordmark, a menu button and the avatar stay in the bar, and nothing wraps at 320 pixels; the household's name and the links move into a sheet from the top whose header lines up with the bar. The account menu opens under the avatar and never wider than the screen. Focus moves into the sheet and stays there; Escape, the close button or choosing a link closes it, and focus goes back to the menu button.

Yes. The bar mirrors, the divider stays between the two cells, the menu opens under the button's start edge, the check and the arrows follow the direction, and the storage figures keep their order. 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. The menu opens with the library's fade, the chevron turns, and the sheet slides down from the top. With reduced motion the chevron turns at once and the sheet appears without sliding.