Next Appointment Navbar Block for React

Edit PAGES for the links. Mark the page you're on with current: true: that link gets aria-current="page" and a stroke on the bar. The appointment is Lena Ortiz, Cut and colour, starting 42 minutes after the page loads (LEAD_MS). Change those three in the popover and the constant. Until the browser knows the clock, the chip holds the words "in 42 min." in the same width, so the bar does not jump. Every link points at #.

Join is a link. Point it at the visit. Reschedule writes a polite line ("Reschedule stays in this demo. Nothing was sent.") and does not submit anything: replace that handler with your reschedule flow. Join and New booking render the link they're given with render, with nativeButton={false}.

The server does not know the visitor's clock, so the first render prints "in 42 min." as plain text. After mount, the same spot becomes a relative time counted from that moment plus 42 minutes. The placeholder is the full phrase, in a reserved width, so swapping it does not move the chip.

The wordmark is a link home. The links sit in a nav landmark named Main. The chip is a button whose name is its own words, "Next appointment in 42 min." (the word "appointment" is visually hidden); below md all of it is visually hidden except the dot, and the name stays the same. The popover repeats the client, the service and the start in a description list. The popover is not modal. Tab can leave it, and Escape closes it.

Below md the links hide, the chip keeps the status dot and hides its words, and a menu button opens a sheet from the top with the four links. Below sm New booking leaves the bar and sits at the bottom of that sheet. Choosing a link closes the sheet. At 320 pixels the bar is the wordmark, the dot and the menu button.

Nothing moves on load. The relative time updates on its own schedule. The popover uses its own open transition, the sheet slides down from the top, and a band of light sweeps across New booking once on hover and keyboard focus. With reduced motion the sheet appears without sliding and the light fades in where it stands.