Site header

<script lang="ts">
	import { tick } from 'svelte';
	import { isCurrentGroup, isCurrentPath, type NavGroup } from '../types';

	interface Props {
		group: NavGroup;
		/** DOM id of the panel; the button gets `${id}-button`. */
		id: string;
		open: boolean;
		currentPath?: string;
		currentSectionLabel: string;
		onToggle: () => void;
		onClose: () => void;
	}

	let { group, id, open, currentPath, currentSectionLabel, onToggle, onClose }: Props = $props();

	let root = $state<HTMLLIElement>();
	let button = $state<HTMLButtonElement>();
	let panel = $state<HTMLDivElement>();

	const current = $derived(isCurrentGroup(group, currentPath));

	/*
	 * Panel placement: it hangs from its trigger's start edge, and flips to the end edge after opening
	 * only when it would otherwise leave the viewport. Logical sides, so RTL mirrors on its own.
	 */
	let placement = $state<'start' | 'end' | null>(null);
	const side = $derived(placement ?? 'start');

	function measure() {
		const element = panel;
		if (!element) return;
		const gutter = 8;
		const width = document.documentElement.clientWidth;
		const rect = element.getBoundingClientRect();
		const rtl = getComputedStyle(element).direction === 'rtl';
		const overflowsEnd = rtl ? rect.left < gutter : rect.right > width - gutter;
		const overflowsStart = rtl ? rect.right > width - gutter : rect.left < gutter;
		if (overflowsEnd && !overflowsStart) placement = 'end';
		else if (overflowsStart && !overflowsEnd) placement = 'start';
		// The panel's top depends on the bar's height (one row or a band), so its room is measured too.
		const room = document.documentElement.clientHeight - rect.top - gutter;
		element.style.maxHeight = room > 0 ? `${Math.round(room)}px` : '';
	}

	$effect(() => {
		if (!open) {
			placement = null;
			return;
		}
		measure();
	});

	/* The viewport can change while the panel is open; measure again from the default side. */
	function onWindowResize() {
		placement = null;
		requestAnimationFrame(measure);
	}
	const links = $derived(
		group.href ? [{ label: group.label, href: group.href }, ...group.children] : group.children
	);

	const panelLinks = () =>
		panel ? Array.from(panel.querySelectorAll<HTMLAnchorElement>('a[href]')) : [];

	function close() {
		onClose();
		button?.focus();
	}

	async function onButtonKeydown(event: KeyboardEvent) {
		if (event.key !== 'ArrowDown') return;
		event.preventDefault();
		if (!open) onToggle();
		await tick();
		panelLinks()[0]?.focus();
	}

	/* Escape and the optional arrow keys from the APG disclosure navigation pattern. */
	function onWindowKeydown(event: KeyboardEvent) {
		// Escape works even when the opening click left focus on the body (WebKit).
		if (event.key === 'Escape') {
			event.preventDefault();
			close();
			return;
		}
		if (!(event.target instanceof Node) || !panel?.contains(event.target)) return;
		const items = panelLinks();
		const index = items.indexOf(document.activeElement as HTMLAnchorElement);
		if (event.key === 'ArrowDown') {
			event.preventDefault();
			items[Math.min(index + 1, items.length - 1)]?.focus();
		} else if (event.key === 'ArrowUp') {
			event.preventDefault();
			if (index <= 0) button?.focus();
			else items[index - 1]?.focus();
		} else if (event.key === 'Home') {
			event.preventDefault();
			items[0]?.focus();
		} else if (event.key === 'End') {
			event.preventDefault();
			items[items.length - 1]?.focus();
		}
	}

	/* Close when focus moves anywhere outside the item, for example by tabbing past the last link. */
	function onDocumentFocusIn(event: FocusEvent) {
		if (event.target instanceof Node && root && !root.contains(event.target)) onClose();
	}

	/* Close on a pointer press outside the item. Presses inside reach the links first. */
	function onDocumentPointerDown(event: PointerEvent) {
		if (event.target instanceof Node && root && !root.contains(event.target)) onClose();
	}

	const focusClass =
		'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_accent)]';
</script>

<svelte:window
	onkeydown={open ? onWindowKeydown : undefined}
	onresize={open ? onWindowResize : undefined}
/>
<svelte:document
	onfocusin={open ? onDocumentFocusIn : undefined}
	onpointerdown={open ? onDocumentPointerDown : undefined}
/>

<!-- The current section is a 2 px accent rule on the bar's bottom hairline, like every current link. -->
<li
	bind:this={root}
	class={[
		'relative flex items-center',
		current &&
			"after:absolute after:inset-x-3 after:bottom-0 after:h-0 after:border-b-2 after:border-[var(--_accent)] after:content-['']"
	]}
>
	<button
		bind:this={button}
		type="button"
		id="{id}-button"
		aria-expanded={open}
		aria-controls={id}
		onclick={onToggle}
		onkeydown={onButtonKeydown}
		class={[
			'inline-flex min-h-11 items-center gap-x-1 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',
			'active:bg-[var(--_fill-pressed)] active:duration-[80ms]',
			open
				? 'bg-[var(--_fill)] text-[var(--_text)] hover:bg-[var(--_fill-active)]'
				: current
					? 'text-[var(--_text)] hover:bg-[var(--_fill)]'
					: 'text-[var(--_text-2)] hover:bg-[var(--_fill)] hover:text-[var(--_text)]',
			focusClass
		]}
	>
		<span>{group.label}</span>
		{#if current}
			<span class="sr-only">{currentSectionLabel}</span>
		{/if}
		<svg
			class={[
				'size-4 shrink-0 transition-transform motion-reduce:transition-none',
				// The chevron keeps time with its panel: 200 ms in, 150 ms out.
				open
					? '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>

	<!-- The one elevated surface: a 12 px panel with the popover shadow, 4 px rows inside its 8 px padding. -->
	<div
		bind:this={panel}
		{id}
		hidden={!open}
		class={[
			'absolute top-full z-30 mt-2 w-72 max-w-[calc(100vw-2rem)] overflow-y-auto rounded-xl bg-[var(--_raised)] p-2 shadow-[var(--_shadow-popover)]',
			'transition-[opacity,translate,display] transition-discrete motion-reduce:transition-none',
			// Opens over 200 ms from 4 px above; closes faster, on the exit curve.
			open
				? '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)]',
			// Pulled out by its own padding, so row text sits under the trigger's text and row fills under its fill.
			side === 'end' ? '-end-2' : '-start-2'
		]}
	>
		<ul role="list" class="flex flex-col">
			{#each links as link, index (index)}
				{@const active = isCurrentPath(link.href, currentPath)}
				<li>
					<a
						href={link.href}
						aria-current={active ? 'page' : undefined}
						class={[
							'block min-h-9 rounded-sm px-3 py-2 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] pointer-coarse:min-h-11',
							active ? 'bg-[var(--_fill-active)]' : 'hover:bg-[var(--_fill)]'
						]}
					>
						<span
							class={[
								'block text-sm break-words text-[var(--_text)]',
								active ? 'font-semibold' : 'font-medium'
							]}>{link.label}</span
						>
						{#if link.description}
							<span class="mt-1 block text-xs leading-snug break-words text-[var(--_text-2)]"
								>{link.description}</span
							>
						{/if}
					</a>
				</li>
			{/each}
		</ul>
	</div>
</li>