Drill-Down Drawer Navbar Block for React

Edit GROUPS at the top of the file: each group has an id, a label, a summary shown under its row and a list of items (a title, a one-line description, an icon and an href). PAGES holds the plain links under the rows and FOOT the three small links at the foot. Add a third group and it gets its own row and its own panel; keep a group to about four to six items so its panel fits a phone.

The root list and each group's panel share one grid cell. Choosing a group row moves the root panel out and the group's panel in with a 300 ms CSS transform, and Back reverses it. The panel that isn't showing is inert, so a keyboard and a screen reader never reach it, and the row says whether its panel is open and which one it controls. The sheet's state is held in the block: closing the sheet by any route puts it back on the root list.

Opening a group moves focus to its Back button; Back moves it to the row you came from; Escape in a group closes the whole sheet and focus goes back to the Menu button, as it does for the close button and for choosing a link. Focus stays inside the sheet while it's open. The sheet is a modal dialog named Menu, opened by the Menu button rendered through render.

Yes. Add md:hidden to the Menu button and a nav of links with max-md:hidden next to the wordmark; the sheet stays for phones. This block keeps the button at every width so the drill-down is visible.

A sheet from the end of the page opens on the left in a right-to-left layout, so the sheet's edge and border switch sides, and the panels slide in from the other direction with their chevrons and Back arrows mirrored. The sheet's own slide-in is the catalog's and still starts from the right edge, a short offset only.

The sheet slides in from the end, the panels slide between each other, and a band of light sweeps across the Shine Button on hover and focus. With reduced motion the sheet appears without sliding, the panels swap at once and the light fades in where it stands.