Brand Header Sidebar Block for React

Yes: they call navigator.clipboard.writeText with the logo name or with the mark's SVG source, which is built from the same path data that draws the mark, so the two can't drift apart. Browsers allow it on a secure page, after a click or a key press. When the write is refused, the status line says "Could not copy" and the Brand page adds nothing, so what the page lists is always what reached the clipboard. The Brand page then shows the last text in a code block, which also makes the result checkable on a page where the clipboard is out of reach.

Everything but the clipboard. The five pages, their rows and the list of copied items are typed or kept in the block's own state; "Back to home" and "Brand guidelines" show a page here instead of navigating. Replace the handlers with your routes: home, your brand-kit page, and your real mark's SVG in place of MARK_PATHS. The rail's links go to # whose handler shows the page. They're SidebarMenuButtons with render set to an a element.

The wordmark, the Staging badge and the fold button leave, and the mark stays as a 32 px button that still opens the same menu, with its name "Opalcrest menu". Because the fold button leaves with the labels, the menu button in the top bar appears and takes focus if the fold dropped it. The rail along the sidebar's edge also folds and unfolds it. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.

Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The lockup is in the sheet's header with the same menu, and a button at its end closes the sheet; Escape or choosing a page closes it as well. The window keeps its height, and the status line reports each copy.

Back to the lockup, on every library. Each choice runs its handler, then returns focus to the button that opened the menu a moment later, since some libraries leave it on the page after a pointer choice. Escape closes the menu with focus on the lockup too. The menu is a standard menu: arrow keys move through its items, and Enter or Space chooses one.

The lockup is a button named "Opalcrest menu" whatever the rail's width, and the menu is announced as one. The rail is a navigation landmark named after the product with each group named by its label, and the open page is marked as the current page. The mark is decorative and hidden from assistive technology. One polite status line reports the page and each copy result, and the page's heading names the open page.