Site header

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

	interface Props {
		/** DOM id of the dialog, referenced by the menu button's aria-controls. */
		id: string;
		open: boolean;
		onClose: () => void;
		brand: Brand;
		/** The header's logo snippet, so the drawer keeps the same mark as the bar. */
		logo?: Snippet;
		items: NavItem[];
		currentPath?: string;
		cta?: HeaderLink;
		actions?: Snippet;
		labels: HeaderLabels;
		navLabel: string;
	}

	let {
		id,
		open,
		onClose,
		brand,
		logo,
		items,
		currentPath,
		cta,
		actions,
		labels,
		navLabel
	}: Props = $props();

	let dialog = $state<HTMLDialogElement>();
	let closeButton = $state<HTMLButtonElement>();
	let expandedGroups = $state<number[]>([]);

	/* Native modal dialog: focus moves inside on open and back to the menu button on close. */
	$effect(() => {
		const element = dialog;
		if (!element) return;
		if (open && !element.open) {
			expandedGroups = items.flatMap((item, index) =>
				isGroup(item) && isCurrentGroup(item, currentPath) ? [index] : []
			);
			element.showModal();
			// The brand link comes first in the DOM; the close control is the deliberate first stop.
			closeButton?.focus();
		} else if (!open && element.open) {
			element.close();
		}
	});

	/*
	 * Any link activated inside the drawer, including links from the actions snippet, closes it.
	 * So does a press on the scrim: one that starts and ends outside the panel, never a drag out of it.
	 */
	$effect(() => {
		const element = dialog;
		if (!element) return;
		const outside = (event: MouseEvent) => {
			const rect = element.getBoundingClientRect();
			return (
				event.clientX < rect.left ||
				event.clientX > rect.right ||
				event.clientY < rect.top ||
				event.clientY > rect.bottom
			);
		};
		let pressedOutside = false;
		const onPointerDown = (event: PointerEvent) => {
			pressedOutside = event.target === element && outside(event);
		};
		const onClick = (event: MouseEvent) => {
			const target = event.target instanceof Element ? event.target : null;
			if (target?.closest('a[href]')) onClose();
			else if (pressedOutside && event.target === element && outside(event)) onClose();
			pressedOutside = false;
		};
		element.addEventListener('pointerdown', onPointerDown);
		element.addEventListener('click', onClick);
		return () => {
			element.removeEventListener('pointerdown', onPointerDown);
			element.removeEventListener('click', onClick);
		};
	});

	/* Keep the page from scrolling behind the drawer, restoring whatever was set before. */
	$effect(() => {
		if (!open) return;
		const html = document.documentElement;
		const previous = html.style.overflow;
		html.style.overflow = 'hidden';
		return () => {
			html.style.overflow = previous;
		};
	});

	function toggleGroup(index: number) {
		expandedGroups = expandedGroups.includes(index)
			? expandedGroups.filter((i) => i !== index)
			: [...expandedGroups, index];
	}

	/* 44 px rows for a coarse pointer; the current item is marked by fill and weight, not colour alone. */
	const rowClass =
		'flex min-h-11 w-full items-center rounded-lg px-2 py-2 text-start text-base tracking-[-0.011em] rtl:tracking-normal transition-colors duration-150 ease-[cubic-bezier(.2,0,0,1)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_accent)] active:bg-[var(--_fill-pressed)] active:duration-[80ms]';
	const restClass =
		'font-normal text-[var(--_text-2)] hover:bg-[var(--_fill)] hover:text-[var(--_text)]';
	/* Top-level destinations are medium, their children regular, so the two levels read apart. */
	const topRestClass =
		'font-medium text-[var(--_text-2)] hover:bg-[var(--_fill)] hover:text-[var(--_text)]';
	const currentClass = 'bg-[var(--_fill-active)] font-semibold text-[var(--_text)]';
	/* A current group is still a control: it keeps the hover fill and only changes weight and tone. */
	const currentGroupClass = 'font-medium text-[var(--_text)] hover:bg-[var(--_fill)]';
</script>

<!-- An opaque raised surface with the layered drawer shadow, whose ring is its edge; forced colours get a border instead. -->
<dialog
	bind:this={dialog}
	{id}
	aria-label={labels.menu}
	onclose={onClose}
	class="fixed inset-y-0 start-auto end-0 m-0 h-dvh max-h-none w-full max-w-sm translate-x-full flex-col bg-[var(--_raised)] p-0 text-[var(--_text)] shadow-[var(--_shadow-drawer)] transition-[translate,display,overlay] transition-discrete duration-[180ms] ease-[cubic-bezier(.4,0,1,1)] backdrop:bg-black/40 backdrop:opacity-0 backdrop:transition-[opacity,display,overlay] backdrop:transition-discrete backdrop:duration-[180ms] open:flex open:translate-x-0 open:duration-250 open:ease-[cubic-bezier(.16,1,.3,1)] open:backdrop:opacity-100 open:backdrop:duration-250 motion-reduce:transition-none motion-reduce:backdrop:transition-none rtl:-translate-x-full rtl:open:translate-x-0 starting:open:translate-x-full starting:open:backdrop:opacity-0 rtl:starting:open:-translate-x-full forced-colors:border-s"
>
	<div class="flex items-center justify-between gap-x-4 border-b border-[var(--_line)] px-4 py-2">
		<a
			href={brand.href}
			aria-label={logo ? brand.name : undefined}
			class="flex min-h-11 min-w-0 items-center truncate rounded-lg text-lg font-semibold tracking-[-0.015em] transition-colors duration-150 ease-[cubic-bezier(.2,0,0,1)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_accent)] active:text-[var(--_text-2)] active:duration-[80ms] rtl:tracking-normal"
		>
			{#if logo}{@render logo()}{:else}{brand.name}{/if}
		</a>
		<button
			bind:this={closeButton}
			type="button"
			onclick={onClose}
			class="inline-flex size-11 shrink-0 items-center justify-center rounded-lg transition-colors duration-150 ease-[cubic-bezier(.2,0,0,1)] hover:bg-[var(--_fill)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_accent)] active:bg-[var(--_fill-pressed)] active:duration-[80ms]"
		>
			<svg class="size-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
				<path
					d="M5 5l10 10M15 5L5 15"
					stroke="currentColor"
					stroke-width="1.5"
					stroke-linecap="round"
				/>
			</svg>
			<span class="sr-only">{labels.close}</span>
		</button>
	</div>

	<nav aria-label={navLabel} class="min-h-0 flex-1 overflow-y-auto px-2 py-2">
		<ul role="list" class="flex flex-col gap-y-1">
			{#each items as item, index (index)}
				<li>
					{#if isGroup(item)}
						{@const expanded = expandedGroups.includes(index)}
						{@const current = isCurrentGroup(item, currentPath)}
						<button
							type="button"
							aria-expanded={expanded}
							aria-controls="{id}-group-{index}"
							onclick={() => toggleGroup(index)}
							class={[
								rowClass,
								'justify-between gap-x-3',
								current ? currentGroupClass : topRestClass
							]}
						>
							<span class="min-w-0 break-words">
								{item.label}
								{#if current}
									<span class="sr-only">{labels.currentSection}</span>
								{/if}
							</span>
							<svg
								class={[
									'size-4 shrink-0 transition-transform motion-reduce:transition-none',
									// The chevron keeps time with its list: 200 ms in, 150 ms out.
									expanded
										? 'rotate-180 duration-200 ease-[cubic-bezier(.16,1,.3,1)]'
										: 'duration-150 ease-[cubic-bezier(.4,0,1,1)]'
								]}
								viewBox="0 0 16 16"
								fill="none"
								aria-hidden="true"
							>
								<path
									d="M4 6l4 4 4-4"
									stroke="currentColor"
									stroke-width="1.75"
									stroke-linecap="round"
									stroke-linejoin="round"
								/>
							</svg>
						</button>
						<ul
							id="{id}-group-{index}"
							role="list"
							hidden={!expanded}
							class={[
								'ms-3 flex flex-col gap-y-1 pb-3 transition-[opacity,translate,display] transition-discrete motion-reduce:transition-none',
								// The links follow the chevron: in over 200 ms, out faster on the exit curve.
								expanded
									? 'duration-200 ease-[cubic-bezier(.16,1,.3,1)] starting:-translate-y-1 starting:opacity-0'
									: '-translate-y-1 opacity-0 duration-150 ease-[cubic-bezier(.4,0,1,1)]'
							]}
						>
							{#if item.href}
								{@const active = isCurrentPath(item.href, currentPath)}
								<li>
									<a
										href={item.href}
										aria-current={active ? 'page' : undefined}
										class={[rowClass, active ? currentClass : restClass]}
									>
										{item.label}
									</a>
								</li>
							{/if}
							{#each item.children as child, childIndex (childIndex)}
								{@const active = isCurrentPath(child.href, currentPath)}
								<li>
									<a
										href={child.href}
										aria-current={active ? 'page' : undefined}
										class={[rowClass, active ? currentClass : restClass]}
									>
										{child.label}
									</a>
								</li>
							{/each}
						</ul>
					{:else}
						{@const active = isCurrentPath(item.href, currentPath)}
						<a
							href={item.href}
							aria-current={active ? 'page' : undefined}
							class={[rowClass, active ? currentClass : topRestClass]}
						>
							{item.label}
						</a>
					{/if}
				</li>
			{/each}
		</ul>
	</nav>

	{#if cta || actions}
		<div class="flex flex-col gap-y-3 border-t border-[var(--_line)] px-4 py-4">
			{#if actions}
				<!-- Pulled out by the actions' own 4 px padding, so their text shares the rows' edge. -->
				<div class="-mx-1 flex items-center gap-x-3">{@render actions()}</div>
			{/if}
			{#if cta}
				<a
					href={cta.href}
					class="inline-flex min-h-11 items-center justify-center rounded-lg bg-[var(--_accent)] px-4 py-2 text-base font-medium tracking-[-0.011em] text-[var(--_on-accent)] transition-[background-color,scale] duration-150 ease-[cubic-bezier(.2,0,0,1)] hover:bg-[var(--_accent-hover)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_accent)] active:scale-[.98] active:bg-[var(--_accent-pressed)] active:duration-[80ms] motion-reduce:active:scale-100 rtl:tracking-normal"
				>
					{cta.label}
				</a>
			{/if}
		</div>
	{/if}
</dialog>