Custom Width Sidebar Block for React

Give the provider a style with --sidebar-width set to any length, as this block does from its selected preset (style={{ "--sidebar-width": "19rem" }}, typed as CSSProperties). The sidebar, the gap it leaves in the layout and its mobile counterpart all read the variable, so nothing else changes. The folded width is a second variable, --sidebar-width-icon, 3rem by default. The window itself stays 36rem high on phones and 46rem from the medium breakpoint whatever the width.

The page keeps hidden copies of the ten labels at each preset's width, laid out like the rail's rows, and counts the ones whose text is wider than the box they truncate in (their scroll width against their client width). It measures once the page has loaded, again when the fonts finish loading and again when the current label changes weight, so the counts are right in whatever font your theme uses. Because the copies are independent of the real rail, the numbers stay right while the rail is folded to icons or, on a phone, not on screen at all.

Below the medium breakpoint the sidebar is a sheet from the start edge, and it has its own width, 18rem, set on the sheet and not on the provider. The preset therefore applies from 768 px up, and the page says so. On a phone the select still changes the measured counts and the status line, so you can see what a width would do on a larger screen. To size the sheet too, override --sidebar-width on the sheet's own element in the catalog.

Everything. The ten settings pages and their sentences are typed in PAGES, the width lives in the block's own state, and nothing is saved. The pages are links to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with render set to an a element. Point them at your routes and mark the current one with isActive.

The catalog's rail on Ark can be dragged to resize the sidebar, and it writes the same --sidebar-width variable on the provider that the presets set, so the two would fight over one value. This block leaves the rail out and keeps the menu button, which still folds the sidebar to its icons. The other bases' rail only toggles, but the block keeps the same markup on all of them.

The sidebar is a navigation landmark named after the product, with its two groups named by their labels and the open page marked as the current page. A cut label keeps its full name for screen readers and shows in full in a tooltip when the rail is folded. The width control is a labeled group of four options with arrow keys, or a labeled native select on smaller screens, and one polite status line reports the width and the measured count after each change.