Local Time Portfolio Navbar Block for React

From the visitor's own device clock, read once the page has loaded and again every 30 seconds, then moved to Bogotá by a fixed offset (OFFSET_MINUTES, minus 300). Until it has been read, the digits are dashes and "online" and "offline" are unseen, in the same width, so nothing shifts. Bogotá has no daylight saving, which is why a fixed offset stays correct all year. For a city that changes its clocks, replace localMinutes with Intl.DateTimeFormat and a time zone.

isOnline compares the local minutes with OPEN_FROM (08:00) and OPEN_TO (19:00). Both words sit in one grid cell and the one that doesn't apply is invisible and hidden from screen readers, so the clock reads as "Bogotá 09:32 online" and the width never moves. It ignores weekends; add a day check to isOnline if you want one.

Only the digits, once every 30 seconds: there is no animation, so reduced motion changes nothing. The dot is still.

Below lg the numbered links, the status and the clock leave the bar. A menu button opens a full-screen sheet from the top: its header lines up with the bar (the name where it was, a close button where the menu button was), then the four links in large type with their numerals, the status and the clock, and the button in its foot. From sm the Start a project button stays in the bar. Choosing a link closes the sheet.

Edit PAGES: the bar and the sheet read it, and the page you're on takes aria-current="page". Every link points at #. The Shine Button renders the link it's given with render, with nativeButton={false}.

It's the page's first block: its + marks and rails line up with every block under it, and it draws no bottom border because the next block's top rule is its bottom edge. The sheet opens over the page and never changes the bar's height.