Balance Chip Fintech Navbar Block for React

Edit BALANCE at the top of the file (a number of dollars) or replace it with a prop from your server; AMOUNT and the number of dots (DOTS) are derived from it. The figure shown here is example data, not an account.

The amount stays in the page, marked aria-hidden and invisible, so the chip keeps its width; the dots are drawn on top. If the amount must never reach the browser while hidden, render only the dots and fetch the amount when the button is pressed.

It is kept in the page's state, so it holds while you stay on the page and resets on reload. To remember it for a visit, write it to sessionStorage in hide and read it in an effect after mount.

It is one toggle button named "Hide balance" whose pressed state says whether the amount is hidden; the eye icon changes with it, so the state is not colour alone. A polite status, empty until you press it, says "Balance hidden." or reads the amount out when it is shown again. While hidden, the dots are skipped.

Below lg a menu button opens a sheet from the top with the links and the account; the balance chip stays in the bar, its "Checking" label folding into the chip's name for screen readers below sm. On the narrowest phones the wordmark shows only its icon. It fits at 320 pixels.

Edit PAGES: the bar and the sheet read it, and the page you're on takes aria-current="page". The account's avatar links to #.