Multi-Tenant Navbar Block for React

Edit ORGS at the top of the file: each organization has an id, a name, a tile, the role the viewer holds in it and a list of projects (an id, a name and an open-ticket count). The menus, the role badge, the sheet's nested list and the width of both buttons are all built from it. The organizations, roles and counts are made up for the demo; in an app, replace pickOrg and pickProject with your session's scope change.

The project list belongs to the organization, so the project is set to the new organization's first project, the project button swaps its label in place (no skeleton, no flash) and the status line says "Switched to Sablewick Books, role Admin. Project: Orders." Choosing the organization you are already in changes nothing. Both buttons are drawn over unseen copies of every possible label, so neither changes width and the bar keeps its height.

Each button is named for what it holds ("Organization: Cinderbay Outfitters Owner", "Project: Support"), says whether its menu is open and which menu it controls. The slash between them is decoration and is hidden from screen readers. The rows are radio items: the chosen one is checked. Escape closes the menu and returns focus to the button, and so does choosing a row, with the keyboard or the pointer. 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.

Below the md breakpoint the wordmark's icon, the scope as a line of text ("Cinderbay Outfitters / Support", truncated) and a menu button are all that stay in the bar; nothing wraps at 320 pixels. The sheet from the top lists the organizations (the chosen one pressed), the projects of that organization, the links and the action. Choosing an organization updates the project list under it and keeps the sheet open; choosing a project closes it, and focus goes back to the menu button.

Yes. The bar mirrors, the dividers stay between the cells, the menus open under the button's start edge, and the checks and the sheet follow the direction. The wordmark is artwork and keeps its direction. Wrap the block in your direction provider (the catalog's DirectionProvider) so the menus follow the page.

Nothing moves on load. The menus open with the library's fade, the chevrons turn, and the sheet slides down from the top. With reduced motion the chevrons turn at once and the sheet appears without sliding.