Sidebar Toggle Navbar Block for React

The stage is a CSS grid whose first column goes from 10rem to 3rem with a 300 ms transition, so the rail narrows and the page beside it takes the room. Each link's label is clipped by the rail while it's folded, which keeps the link's name for a screen reader, and a tooltip names each icon while the labels are hidden (it's switched off while they show). Nothing is measured and the bar doesn't move. With reduced motion the rail changes width at once. In your app, put the same grid around your layout and keep the state where the rest of your page can read it.

A listener on the document toggles the sidebar when you press [, unless a modifier key is down or you're typing in a field, a select or an editable area, where [ is just a character. The button announces it with aria-keyshortcuts="[" and its tooltip shows the key in a Kbd. Remove the listener (the useEffect) if the key clashes with something in your app.

It's named Sidebar and says whether it's expanded; its aria-controls points at the mini sidebar, a nav landmark named Main. The tooltip says Toggle sidebar and shows the key, on hover and on keyboard focus. The tooltip trigger renders the button with render, and the rail's tooltips are switched off with disabled while labels show.

Below the md breakpoint the stage is hidden and a second button, the same icon and name, opens a sheet from the start of the page with the four links at touch size, a header repeating the wordmark and a close button. Escape, the close button or choosing a link closes it and focus goes back to the button. A sheet from the start opens on the right in a right-to-left layout, so its edge and border switch sides.

Edit ITEMS at the top of the file (an icon, a label, an href and current: true on the page you're on, which gets aria-current="page" and a tint); the stage and the phone sheet both read it. The page's title is the line after the wordmark, and the avatar's initials are in AvatarFallback. A rail row is 24 pixels tall, the smallest touch target, so keep it to about four items in this stage.

It's the page's first block: its rails and plus marks line up with every block under it and its top rule falls on the window's top edge. The stage is the one framed figure the bar may have; it is a preview of your real sidebar, drawn at the width of the page's column, so replace it with your own layout when you use the bar. Every link points at #.