Navbar 22 block design & features
The bar lays out a logo icon and site name on the left, four navigation links across the center, and a location name with a live-updating clock on the right. Built with Shadcn UI Button and Sheet components, the center links use a text-roll hover animation where the visible label slides upward and a duplicate slides in from below, with the replacement gaining a bottom border on arrival.
The clock reads the browser time and formats it as hours and minutes with an AM/PM suffix, updating every second via a setInterval. It sits beside a city label ("Brisbane") separated by a slash, all in muted foreground at small font size. The logo uses a dark-mode invert filter.
Styling is spare: medium-weight text at 14px for links, no background color on the bar itself, and the only motion comes from the 300ms translate on the text-roll hover. The bar occupies a 64px-tall container inside a wider section with vertical padding. The clock and location display are hidden below the large breakpoint to keep the bar uncluttered.
On mobile an outline icon button opens a full-screen shadcn/ui Sheet from the top. Inside, the logo repeats with the site name, links stack vertically with rounded hover backgrounds, and the clock and city appear centered below a top border at the bottom of the sheet content.