// @design-system: layout/DesktopTopBar /** * DesktopTopBar - glass sticky horizontal navigation bar for desktop (lg+). * * Shown only on screens at lg breakpoint and above via `hidden lg:flex`. * Floats over page content with backdrop-blur glass effect. * Mobile TopBar and BottomNav remain unchanged; AppShell hides them on lg+. * * @example * } * endSlot={} * /> */ import { type ReactNode, useSyncExternalStore } from 'react'; import { cn } from '@/lib/cn'; import { useT } from '@/lib/i18n/react'; import { getNavSpeedServerSnapshot, getNavSpeedSnapshot, subscribeNavSpeed, } from '@/lib/nav/nav-speed'; export interface DesktopTopBarItem { href: string; /** Icon node - use from icons/. */ icon: ReactNode; /** Accessible label (also rendered as visible text). */ label: string; /** Whether this item is the currently active route. */ active?: boolean; } export interface DesktopTopBarProps { /** Navigation link items. */ items: DesktopTopBarItem[]; /** Visual/interaction mode - drives active indicator color. */ mode?: 'customer' | 'vendor'; /** * Slot at the logical start (inline-start). * Typically the . */ logoSlot?: ReactNode; /** * Slot at the logical end (inline-end). * Typically + ⌘K hint + auth chip. */ endSlot?: ReactNode; className?: string; } export function DesktopTopBar({ items, mode = 'customer', logoSlot, endSlot, className, }: DesktopTopBarProps) { const t = useT('nav'); const isVendor = mode === 'vendor'; const navSpeed = useSyncExternalStore( subscribeNavSpeed, getNavSpeedSnapshot, getNavSpeedServerSnapshot, ); return (
{/* hidden on mobile - only rendered at lg+ */}
); }