Site header

<script lang="ts">
	import { onMount, type Snippet } from 'svelte';
	import MobileDrawer from './parts/MobileDrawer.svelte';
	import NavDropdown from './parts/NavDropdown.svelte';
	import {
		isCurrentPath,
		isGroup,
		renderableItems,
		type Brand,
		type HeaderLabels,
		type HeaderLink,
		type NavItem
	} from './types';

	interface Props {
		brand: Brand;
		items: NavItem[];
		logo?: Snippet;
		currentPath?: string;
		cta?: HeaderLink;
		actions?: Snippet;
		sticky?: boolean;
		align?: 'center' | 'end';
		navLabel?: string;
		labels?: Partial<HeaderLabels>;
	}

	let {
		brand,
		items,
		logo,
		currentPath,
		cta,
		actions,
		sticky = false,
		align = 'end',
		navLabel = 'Main',
		labels
	}: Props = $props();

	const uid = $props.id();
	const text = $derived<HeaderLabels>({
		menu: 'Menu',
		close: 'Close menu',
		currentSection: '(current section)',
		...labels
	});

	const visibleItems = $derived(renderableItems(items));
	/* The menu, its fallback list and the drawer exist only when they reveal something the bar does not. */
	const hasMenu = $derived(visibleItems.length > 0 || Boolean(actions));

	let openIndex = $state<number | null>(null);
	let menuOpen = $state(false);
	let hydrated = $state(false);
	let menuButton = $state<HTMLButtonElement>();

	/*
	 * When the inline links do not fit beside the brand and the actions, the navigation drops to a
	 * full-width band of its own under them, so the current-location rule stays on the bar's edge
	 * and a dropdown never opens across another row of links. Measured, never guessed: the sum of
	 * the items' natural widths against the room the first row leaves them.
	 */
	let bar = $state<HTMLDivElement>();
	let brandLink = $state<HTMLAnchorElement>();
	let controls = $state<HTMLDivElement>();
	let navList = $state<HTMLUListElement>();
	let ctaLink = $state<HTMLAnchorElement>();
	let banded = $state(false);

	/*
	 * Below the breakpoint the same rule applies to the call to action: when brand, button and Menu
	 * do not fit on one line without wrapping their labels, the button takes a full-width row of its
	 * own and the sign-in action waits in the drawer.
	 */
	let stacked = $state(false);

	function naturalWidth(element: HTMLElement | undefined) {
		if (!element || element.offsetParent === null) return 0;
		// A stacked button carries a full-width basis; measure it without, or it could never unstack.
		const { whiteSpace, width, flexShrink, flexBasis, flexGrow } = element.style;
		element.style.flexBasis = 'auto';
		element.style.flexGrow = '0';
		element.style.whiteSpace = 'nowrap';
		element.style.width = 'max-content';
		element.style.flexShrink = '0';
		const measured = element.getBoundingClientRect().width;
		element.style.whiteSpace = whiteSpace;
		element.style.width = width;
		element.style.flexShrink = flexShrink;
		element.style.flexBasis = flexBasis;
		element.style.flexGrow = flexGrow;
		return measured;
	}

	function measureStack(container: HTMLDivElement) {
		const style = getComputedStyle(container);
		const inner =
			container.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
		const menuWidth = container.querySelector<HTMLElement>('[data-site-header-menu]');
		const needed =
			naturalWidth(brandLink) +
			16 +
			naturalWidth(ctaLink) +
			8 +
			naturalWidth(menuWidth ?? undefined);
		stacked = Boolean(ctaLink) && needed > inner;
	}

	function measureBand() {
		const list = navList;
		const container = bar;
		if (!list || !container) return;
		// The list sits inside the navigation, which is hidden below the breakpoint.
		if (list.offsetParent === null) {
			measureStack(container);
			return;
		}
		stacked = false;
		const items = Array.from(list.children) as HTMLElement[];
		const gap = 4;
		const needed =
			items.reduce((width, item) => width + item.getBoundingClientRect().width, 0) +
			gap * Math.max(0, items.length - 1);
		const style = getComputedStyle(container);
		const inner =
			container.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
		const brandWidth = brandLink?.getBoundingClientRect().width ?? 0;
		const controlsWidth = controls?.getBoundingClientRect().width ?? 0;
		const rowGap = 24;
		const available = inner - brandWidth - controlsWidth - rowGap * (controlsWidth > 0 ? 2 : 1);
		banded = needed > available;
	}

	$effect(() => {
		const container = bar;
		const list = navList;
		if (!container || !list) return;
		// Measure on the next frame: changing the layout inside the observer's own callback loops it.
		let frame = 0;
		const schedule = () => {
			cancelAnimationFrame(frame);
			frame = requestAnimationFrame(measureBand);
		};
		const observer = new ResizeObserver(schedule);
		observer.observe(container);
		observer.observe(list);
		measureBand();
		return () => {
			cancelAnimationFrame(frame);
			observer.disconnect();
		};
	});

	/*
	 * Breakpoint: inline links above `lg` (64rem), the menu button below it. The `lg:` classes
	 * in the markup and this media query must change together.
	 */
	onMount(() => {
		hydrated = true;
		const desktop = window.matchMedia('(min-width: 64rem)');
		// A visitor who opened the pre-hydration fallback list continues in the drawer.
		if (!desktop.matches && window.location.hash === `#${uid}-fallback`) menuOpen = true;
		const sync = () => {
			if (desktop.matches) menuOpen = false;
		};
		desktop.addEventListener('change', sync);
		return () => desktop.removeEventListener('change', sync);
	});

	function toggleDropdown(index: number) {
		openIndex = openIndex === index ? null : index;
	}

	/* The native dialog restores focus to whatever was focused before it opened; make sure that is the menu button. */
	function closeDrawer() {
		menuOpen = false;
		if (menuButton && menuButton.offsetParent !== null) menuButton.focus();
	}

	/* Spacing set for the whole component: 4, 8, 12, 16 and 24 px. Touch targets clear 44 px below lg. */
	const focusClass =
		'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_accent)]';
	const linkClass = `inline-flex min-h-11 items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-150 ease-[cubic-bezier(.2,0,0,1)] lg:min-h-9 lg:pointer-coarse:min-h-11 ${focusClass}`;
	/* The current location is a 2 px accent rule sitting on the bar's own bottom hairline; a border, so forced colours keep it. */
	const indicatorClass =
		"after:absolute after:inset-x-3 after:bottom-0 after:h-0 after:border-b-2 after:border-[var(--_accent)] after:content-['']";
	const menuClass = `inline-flex min-h-11 items-center gap-x-2 rounded-lg px-2 py-2 text-sm font-medium text-[var(--_text)] transition-colors duration-150 ease-[cubic-bezier(.2,0,0,1)] hover:bg-[var(--_fill)] active:bg-[var(--_fill-pressed)] active:duration-[80ms] ${focusClass} lg:hidden`;
</script>

<header
	class={[
		'site-header relative border-b border-[var(--_line)] text-[var(--_text)]',
		sticky
			? 'sticky top-0 z-40 bg-[var(--_surface-material)] backdrop-blur-md'
			: 'bg-[var(--_surface)]'
	]}
>
	<div
		bind:this={bar}
		class={[
			'mx-auto flex min-h-14 max-w-7xl items-stretch gap-x-4 px-4 sm:px-6 lg:min-h-16 lg:flex-wrap lg:gap-x-6',
			stacked ? 'flex-wrap' : 'flex-nowrap'
		]}
	>
		<a
			bind:this={brandLink}
			href={brand.href}
			aria-label={logo ? brand.name : undefined}
			class={[
				'my-2 flex min-h-11 min-w-18 shrink items-center self-center rounded-lg text-lg font-semibold tracking-[-0.015em] transition-colors duration-150 ease-[cubic-bezier(.2,0,0,1)] active:text-[var(--_text-2)] active:duration-[80ms] lg:min-h-9 lg:pointer-coarse:min-h-11',
				// With the links on their own band the first row keeps the 64 px it has on one line.
				banded && 'lg:min-h-12',
				// Stacked, the brand shares the first row with Menu and wraps inside it if it has to.
				stacked && 'max-lg:flex-1 max-lg:basis-0',
				focusClass
			]}
		>
			{#if logo}
				{@render logo()}
			{:else}
				<span class="truncate">{brand.name}</span>
			{/if}
		</a>

		<nav
			aria-label={navLabel}
			class={[
				'hidden min-w-0 flex-1 lg:flex',
				align === 'center' ? 'justify-center' : 'justify-end',
				banded && 'order-last min-h-12 basis-full border-t border-[var(--_line)]'
			]}
		>
			<ul
				bind:this={navList}
				role="list"
				class={[
					'flex items-stretch gap-x-1',
					banded ? 'flex-nowrap' : 'flex-wrap',
					align === 'center' ? 'justify-center' : 'justify-end'
				]}
			>
				{#each visibleItems as item, index (index)}
					{#if isGroup(item)}
						<NavDropdown
							group={item}
							id="{uid}-panel-{index}"
							open={openIndex === index}
							{currentPath}
							currentSectionLabel={text.currentSection}
							onToggle={() => toggleDropdown(index)}
							onClose={() => (openIndex = null)}
						/>
					{:else}
						{@const current = isCurrentPath(item.href, currentPath)}
						<li class={['relative flex items-center', current && indicatorClass]}>
							<a
								href={item.href}
								aria-current={current ? 'page' : undefined}
								class={[
									linkClass,
									'active:bg-[var(--_fill-pressed)] active:duration-[80ms]',
									current
										? 'text-[var(--_text)] hover:bg-[var(--_fill)]'
										: 'text-[var(--_text-2)] hover:bg-[var(--_fill)] hover:text-[var(--_text)]'
								]}
							>
								{item.label}
							</a>
						</li>
					{/if}
				{/each}
			</ul>
		</nav>

		<div
			bind:this={controls}
			class={[
				'my-2 ms-auto flex min-w-min shrink items-center gap-x-2 self-center sm:gap-x-3',
				!banded && 'lg:ms-0',
				!cta && !actions && 'lg:hidden',
				stacked && 'max-lg:contents'
			]}
		>
			{#if actions}
				<div class={['hidden items-center gap-x-3', stacked ? 'lg:flex' : 'sm:flex']}>
					{@render actions()}
				</div>
			{/if}
			{#if cta}
				<a
					bind:this={ctaLink}
					href={cta.href}
					class={[
						'relative inline-flex min-h-9 items-center rounded-lg bg-[var(--_accent)] px-3 py-2 text-center text-sm leading-tight font-medium text-[var(--_on-accent)] transition-[background-color,scale] duration-150 ease-[cubic-bezier(.2,0,0,1)] hover:bg-[var(--_accent-hover)] active:scale-[.98] active:bg-[var(--_accent-pressed)] active:duration-[80ms] motion-reduce:active:scale-100 lg:px-4',
						// The button stays 36 px tall; its hit area is 44 px.
						"before:absolute before:inset-x-0 before:-inset-y-1 before:content-['']",
						stacked &&
							'max-lg:order-last max-lg:mb-3 max-lg:min-h-11 max-lg:basis-full max-lg:justify-center',
						focusClass
					]}
				>
					{cta.label}
				</a>
			{/if}
			{#if !hasMenu}
				<!-- Nothing to reveal: no menu, no fallback list, no drawer. -->
			{:else if hydrated}
				<button
					bind:this={menuButton}
					type="button"
					aria-expanded={menuOpen}
					aria-controls="{uid}-drawer"
					onclick={() => (menuOpen = true)}
					data-site-header-menu
					class={[menuClass, stacked && 'ms-auto self-center']}
				>
					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
						<path
							d="M2 4h12M2 8h12M2 12h12"
							stroke="currentColor"
							stroke-width="1.75"
							stroke-linecap="round"
						/>
					</svg>
					<span>{text.menu}</span>
				</button>
			{:else}
				<!-- Before hydration the menu control is a plain anchor to the fallback list below. -->
				<a
					href="#{uid}-fallback"
					data-site-header-menu
					class={[menuClass, stacked && 'ms-auto self-center']}
				>
					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
						<path
							d="M2 4h12M2 8h12M2 12h12"
							stroke="currentColor"
							stroke-width="1.75"
							stroke-linecap="round"
						/>
					</svg>
					<span>{text.menu}</span>
				</a>
			{/if}
		</div>
	</div>

	{#if !hasMenu}
		<!-- Nothing to reveal. -->
	{:else if !hydrated}
		<!-- No-JS fallback: the anchor above targets this list, which :target reveals below lg. -->
		<div class="lg:hidden">
			<nav
				id="{uid}-fallback"
				aria-label={navLabel}
				class="hidden border-t border-[var(--_line)] px-4 py-2 target:block sm:px-6"
			>
				<ul role="list" class="flex flex-wrap gap-x-1">
					{#each visibleItems as item, index (index)}
						{#if isGroup(item)}
							{#if item.href}
								{@const current = isCurrentPath(item.href, currentPath)}
								<li>
									<a
										href={item.href}
										aria-current={current ? 'page' : undefined}
										class={[
											linkClass,
											current ? 'bg-[var(--_fill-active)] font-semibold' : 'text-[var(--_text-2)]'
										]}
									>
										{item.label}
									</a>
								</li>
							{/if}
							{#each item.children as child, childIndex (childIndex)}
								{@const current = isCurrentPath(child.href, currentPath)}
								<li>
									<a
										href={child.href}
										aria-current={current ? 'page' : undefined}
										class={[
											linkClass,
											current ? 'bg-[var(--_fill-active)] font-semibold' : 'text-[var(--_text-2)]'
										]}
									>
										{child.label}
									</a>
								</li>
							{/each}
						{:else}
							{@const current = isCurrentPath(item.href, currentPath)}
							<li>
								<a
									href={item.href}
									aria-current={current ? 'page' : undefined}
									class={[
										linkClass,
										current ? 'bg-[var(--_fill-active)] font-semibold' : 'text-[var(--_text-2)]'
									]}
								>
									{item.label}
								</a>
							</li>
						{/if}
					{/each}
				</ul>
			</nav>
		</div>
	{:else}
		<MobileDrawer
			id="{uid}-drawer"
			open={menuOpen}
			onClose={closeDrawer}
			{brand}
			{logo}
			items={visibleItems}
			{currentPath}
			{cta}
			{actions}
			labels={text}
			{navLabel}
		/>
	{/if}
</header>

<style>
	.site-header {
		--_surface: var(--site-header-surface, #18181b);
		--_text: var(--site-header-text, #fafafa);
		--_accent: var(--site-header-accent, #fafafa);
		--_on-accent: var(--site-header-on-accent, #18181b);
		/* Three text tones: --_text, then secondary and tertiary mixed from it. */
		--_text-2: color-mix(in oklab, var(--_text) 72%, transparent);
		/* Hairline and one-step fills, all derived from the text colour so every palette gets them. */
		--_line: color-mix(in oklab, var(--_text) 10%, transparent);
		--_fill: color-mix(in oklab, var(--_text) 5%, transparent);
		--_fill-active: color-mix(in oklab, var(--_text) 8%, transparent);
		--_fill-pressed: color-mix(in oklab, var(--_text) 12%, transparent);
		--_accent-hover: color-mix(in oklab, var(--_accent) 88%, var(--_surface));
		--_accent-pressed: color-mix(in oklab, var(--_accent) 80%, var(--_surface));
		/* Raised surfaces (the open panel, the drawer) and the Material bar. */
		--_raised: var(--_surface);
		--_surface-material: color-mix(in oklab, var(--_surface) 80%, transparent);
		/* Layered shadows lit from above; the ring is mixed from the text colour so it shows on dark surfaces too. */
		--_shadow-popover:
			0 0 0 1px color-mix(in oklab, var(--_text) 6%, transparent), 0 4px 6px -1px rgb(0 0 0 / 0.07),
			0 10px 15px -3px rgb(0 0 0 / 0.05);
		--_shadow-drawer:
			0 0 0 1px color-mix(in oklab, var(--_text) 6%, transparent),
			0 10px 15px -3px rgb(0 0 0 / 0.08), 0 25px 50px -12px rgb(0 0 0 / 0.18);
	}

	:global(.dark) .site-header {
		--_surface: var(--site-header-surface, #fafafa);
		--_text: var(--site-header-text, #18181b);
		--_accent: var(--site-header-accent, #18181b);
		--_on-accent: var(--site-header-on-accent, #fafafa);
		/* Raised surfaces step one tone towards white: a dark surface lifts, an inverted light one stays clean. */
		--_raised: color-mix(in oklab, var(--_surface) 92%, #ffffff);
		--_shadow-popover:
			0 0 0 1px color-mix(in oklab, var(--_text) 10%, transparent),
			inset 0 1px 0 color-mix(in oklab, var(--_text) 8%, transparent);
		--_shadow-drawer:
			0 0 0 1px color-mix(in oklab, var(--_text) 10%, transparent),
			inset 0 1px 0 color-mix(in oklab, var(--_text) 8%, transparent);
	}
</style>