Fullscreen Overlay Navbar Block for React

Edit PAGES at the top of the file for the five large links and MORE for the small ones at the foot. The numbers aren't typed: numberOf writes 01, 02 and so on from each link's place, so adding a sixth page numbers itself. The numbers are decoration (hidden from screen readers); the links sit in an ordered list, so a screen reader announces their order and count.

Each link's row is mounted when the sheet opens and starts transparent and a little low (a starting: style), then transitions to place after its own delay: --i × 70 ms + 150 ms, so the five land over about half a second. Because the sheet is mounted again on every open, the entrance plays every time. With reduced motion the links are there when the sheet opens.

The sheet is a top sheet made h-dvh with its border removed, which is the real viewport height on phones whose browser bars come and go. The content is a column with the links at the top and the small links pushed to the foot; on a screen too short for it all, the sheet scrolls. The header repeats the bar's padding, so the wordmark and the close button land exactly where the wordmark and the menu button were.

The menu button is named Menu and says whether it's expanded and which sheet it controls. The sheet is a modal dialog named Menu: focus moves into it, Tab and Shift+Tab stay in it, and Escape or the close button closes it and returns focus to the menu button. Choosing a link closes it too, so a client-side route change doesn't leave it open over the next page. The trigger and the close button render your buttons with render.

Yes. Add md:hidden to the menu button and a nav with the same links and max-md:hidden next to the wordmark; the overlay stays for phones. This block keeps the button at every width so the overlay is what you see in a gallery.

The sheet slides down and fades in, the links rise into place one after the other, and a band of light sweeps across the Shine Button on hover and focus. With reduced motion the sheet appears without sliding, the links are in place at once and the light fades in where it stands.