Cart Sheet Preview Navbar Block for React

Edit START at the top of the file (an id, a name, a note, an icon, a price in cents and a quantity), FREE_FROM for the shipping threshold in cents and MOST for the largest quantity. In a real store, replace the useState with your cart's state and keep step and remove as the two ways it changes.

Nothing is typed twice: countOf and subtotalOf read the lines, the meter's remainder is the threshold minus the subtotal (so it reaches "Your bag ships free" on its own), and each line's total is its price times its quantity. Prices are cents, formatted by one money() helper, and each amount sits in its own left-to-right span so a currency sign never moves in right-to-left layouts.

The bag button opens the sheet and moves focus into it; Escape or the close button closes it and focus returns to the bag button. Inside, each line has a fewer button, a more button and a remove button. At one, the fewer button stays focusable but does nothing (it is aria-disabled, so focus is never dropped). Removing a line moves focus to the remove button that took its place, or to Continue shopping when the bag is empty.

A polite status inside the sheet is empty until something changes, then says, for example, "Merino worsted: 3. Subtotal $38.00, 5 items." The bag button's own name carries the count ("Bag, 4 items"), and the meter is decoration: the sentence above it says the same thing.

Below md the links fold into a menu button that opens a sheet from the top, and the bag button stays in the bar, shrinking to its icon and count. The bag sheet takes the screen but for a sliver, and its list scrolls while the header, meter and subtotal stay put. It fits at 320 pixels.

The end of the page: the right edge in left-to-right layouts and the left edge in right-to-left ones, where its border moves to the other side too.

Edit PAGES: the bar and the menu sheet read it, and the page you're on takes aria-current="page". Checkout points at #: in this demo nothing is paid and nothing is sent, and the bag resets when the page reloads. Checkout renders the link it's given with render, with nativeButton={false}.