Flyout Panels Navbar Block for React

The three lists are typed arrays and an object at the top of the file: PRODUCT (a title, an icon and an href per link), INTEGRATIONS (the same plus a one-line description and a status for the badge) and CUSTOMERS (the figure, its line, the seven bar heights in percent, the chart's text description and the link). The panel and the sheet read the same data. A panel's width is a class on its list (w-72, w-96, w-64); keep them narrow, because a flyout that grows past about 400 pixels is a mega menu and wants a different layout.

It is a rotated square on the open trigger's own bottom edge (its ::after), with its first two sides drawn and the panel's background, sitting over the panel's top edge: the panel is eight pixels under the trigger on every library, and the square is centred on that gap. It lives on the trigger because the panels clip their own overflow, and because the trigger centres it however wide the panel is. It appears when the trigger's aria-expanded is true, mirrors with the page's direction and is left out under reduced motion's animation.

The links sit in a nav landmark named Main, after the wordmark (a link home). Tab reaches the wordmark, the three menu buttons, Sign in and Start free. Enter or Space opens a menu, its button says whether it is expanded, and Escape closes it and puts focus back on its button. The chart is an image with a text alternative that gives its trend. Focus stays on the menu's button when it opens; Tab or the arrow keys move into the panel. The arrow keys also move along the bar. The menus also open on hover, and moving between triggers slides one panel from one trigger to the next.

Below the md breakpoint the wordmark, Start free and a menu button stay on the bar, and nothing wraps at 320 pixels. The menu button says whether the menu is open and which panel it controls; it opens a sheet from the end edge (the right in a left-to-right page, the left in a right-to-left one) with a header that repeats the wordmark and a close button. Product, Integrations and Customers are collapsible rows, closed at first and independent of each other: the list, the described list with its badges and the promo card with its chart appear as they do in the flyouts, at the width of the sheet. Sign in and Start free sit at the foot. 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. A sheet taller than the screen scrolls.

Yes, in the panels and in the sheet, so a client-side route change that keeps the navbar mounted doesn't leave a menu open over the new page. Each link takes closeOnClick. The sheet's open state is held in the block too (sheetOpen), and each of its links closes it. Every link points at #: point them at your pages. Sign in and Start free render the link they're given with render, with nativeButton={false}.

A sheet's side is a physical edge (left or right), so a sheet that should come from the end of the line has to know which that is. The menu button's click handler reads its computed direction and picks the edge. If your app always reads one way, pass a fixed side.