Inset Variant Sidebar Block for React

With variant="inset" the sidebar draws no edge of its own: its tint fills the window and the page is meant to be a panel set into it. The catalog's SidebarInset is a main element that adds the margin, radius and shadow through the rail's state. This block uses a plain div that wears the same classes (md:peer-data-[variant=inset]:m-2, the radius, the shadow and the margin that returns when the rail folds), because the page it sits on already has a main. In a full-page app, use SidebarInset and drop the copied classes.

From ISSUES, the ten typed issues at the top of the file. A view keeps the issues its rule matches: all of them, the ones created by the signed-in person, the ones assigned to them, or the ones they opened recently. A label keeps the issues tagged with it. The badges, the count above the list and the status line all call the same countIn helper, so nothing is typed twice, and a label with no issues shows no badge and an empty state in the same space. In your app, take the counts from your server and keep the same rule: one source for the rows and the badges.

Everything. Choosing a view filters the typed issues in the block's own state, and nothing is created, assigned or saved. Replace ISSUES and countIn with your API. The views are links to # whose handler shows the view 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.

Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout, and the inset styling steps aside: the panel fills the window, because the margins and the shadow only apply from the medium breakpoint. Escape or choosing a view closes the sheet and focus goes back to the menu button. The window keeps its height, and the status line at its foot says which view is open and how many issues it holds.

The menu button or the rail along the sidebar's edge folds it to its icons. Each icon keeps its link's full name for screen readers, and a tooltip shows the view and its count on hover or focus. The panel's margin transition follows the rail, so the tint around it stays even. 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. For a full-page app, remove both to remember the state and get the shortcut, and give the provider your page's height instead of the window's.

The sidebar is a navigation landmark named after the product, each group of links is named by its label, and the open view is marked as the current page. Each link's name says its count ("Assigned to me, 3 issues"). An issue's stage is a word with a shape beside it, never a color, and the assignee is read out as "Assigned to Maren Tolliver" or "Unassigned". The list scrolls inside its own region, which takes keyboard focus. One polite status line reports each change, and the titles and counts are isolated so they read right in a right-to-left layout.