Promo Code Banner Navbar Block for React

Edit PROMO at the top: the lead words (lead), the offer, and the code that is shown in the badge and copied. Keep the sentence short (about 30 characters): it stays on one line on a desktop and the code and Copy button wrap beneath it on a phone.

Copy writes the code to the clipboard and swaps its icon for a check for three seconds. The result is also spoken: a single polite status in the row says "Code SPRING20 copied." or, if the clipboard refuses (a page not served over HTTPS), "Couldn't copy. The code is SPRING20." The code stays selectable text in the badge.

The row sits in a one-row CSS grid: dismissing it eases the row from 1fr to 0fr, fading as it goes, and its padding lives inside the fold so it folds to nothing; its top rule then lies on the bar's own. No height is measured in script. The row becomes inert and drops its "Promotion" label so no empty landmark is left. Focus goes where Tab would have taken it, to the bar's wordmark, instead of being lost with the button. With reduced motion it closes at once.

Remember it under a key for this offer, such as dismissed-spring-sale, in a cookie the server reads, and leave the row out of the page. Reading localStorage from an effect would show the row and then fold it away on every visit, moving the whole page under it. The block keeps the choice for the current page only.

The promo wraps to two lines (the code and Copy on the second) and stays under 165 pixels with the bar at 320. Below md the links and Sign in fold into a menu button that opens a sheet from the top, its header lined up with the bar (the wordmark where it was, the close button where the menu button was); Subscribe stays on the bar down to 368 pixels and is in the sheet below that.

Edit PAGES; the bar and the sheet read it. Every link points at #. Sign in and Subscribe render the link they're given with render, with nativeButton={false}.