Settings Header Navbar Block for React

digest is the value shown and saved the value last saved; the edit is dirty while they differ. Dirty turns on three things at once: the General tab gets a small foreground dot plus the hidden words ", unsaved changes" in its name, Discard and Save become active, and the status reads "1 unsaved change". The dot is a shape, not a colour, and everything it says is also in text. Save and Discard never use the browser's disabled while focused: they are aria-disabled with a guarded handler, so focus stays on Save after you press it.

It copies the shown value into saved and says "Saved in this demo": nothing is stored or sent. Replace save with your request and set the note after it settles (and an error state if it fails); discard puts the saved value back. The block's only edited field is the switch so there is something real to save; add your own fields to the state the same way.

Edit SECTIONS (an id and a label each) and DIRTY_SECTION, the id of the tab that holds the edited field. The tabs are links with href="#": point them at your routes and derive the current one from your router. Choosing a tab marks it current and, on a phone, brings it into view.

The switch is named "Weekly digest" and says whether it is on (Space toggles it). The status line is a polite live region, so every change is announced: "1 unsaved change", "Saved in this demo", "Changes discarded". The tabs are links in a nav named Settings sections; the current one has aria-current="page", and the dirty one's name ends with "unsaved changes".

Below the sm breakpoint the digest label is hidden (the switch keeps its name) and Discard shrinks to an icon with the name "Discard changes"; below lg the status line is spoken but not shown. The tabs scroll sideways with a fade at each edge that can still scroll. Nothing wraps at 320 pixels.

Yes. Both rows mirror, the tabs start at the right and the fades sit at the correct edges, and the switch's thumb moves the other way. Wrap the block in your direction provider (the catalog's DirectionProvider) so the switch follows the page.

Nothing moves on load. The switch's thumb slides, tabs ease their colour and the Shine Button keeps its glint. With reduced motion the colours change at once and the tab row jumps to a chosen tab.