Sidebar Layout Settings Block for React

Edit ITEMS: each item has an id, a label, an icon, whether it is locked (cannot be hidden) and how wide its label bar is drawn. DEFAULTS holds the starting layout, collapse mode, order and the items shown. The count in the heading, the order of the drawn rail and the sentence under the drawing are all worked out from the current state, so nothing is typed twice. To store it, save the layout, collapse mode, order and shown ids per person and read them where you render the real navigation.

Each row has Move up and Move down buttons named for the item ("Move Projects up"). They stay in place and focusable at the ends and say so when pressed, the status line says where the item went ("Projects moved to position 2 of 5."), and focus follows the item to the row it moved to. The rows are fixed slots whose text changes, so nothing jumps and the list keeps its height.

Expanded draws an icon and a label for every item, Icons only draws just the icons, and Hidden draws no navigation at all, only a menu button in the app bar that would open it; the sentence says how many items it holds. They apply to the top bar the same way as to a sidebar at either end.

It puts the layout, collapse mode, order and visibility back, and says so in the status line. While everything is at its default the button is marked aria-disabled rather than disabled, so it keeps its place and focus; pressing it says "Already at the defaults." The drawn app is a picture: this page's own navigation is never touched, and a reload starts from the defaults again.

The layout cards are native radios in a named group, so the arrow keys move between them, and each carries its full name ("Sidebar at the start"). The visibility toggles are named for their item ("Show Projects") and pressed when it shows. The drawn app is decorative, and its caption restates it in words. The status line is a polite live region that is present from the start.

The window keeps its height and the list scrolls inside it. The drawn app becomes a short strip pinned at the top of that scroll, so you always see the result of the toggle you just pressed; its caption is kept for screen readers. The layout cards and the collapse choices share the row width.