CustomHeader.astro

---
const base = import.meta.env.BASE_URL;
---

<nav class="custom-header-links" aria-label="Primary navigation">
	<a href={`${base}introduction/overview/`} class="header-link">Overview</a>
	<a href={`${base}getting-started/quick-start/`} class="header-link">Quick Start</a>
	<a href={`${base}reference/cli/`} class="header-link">CLI</a>
	<a href={`${base}guides/ui/`} class="header-link">UI</a>
	<a href={`${base}faq/`} class="header-link">FAQ</a>
</nav>

<!-- Hamburger for splash/homepage on mobile (content pages use Starlight's built-in) -->
<div class="splash-nav-wrapper">
	<button class="splash-hamburger-btn" aria-label="Menu" aria-expanded="false" aria-controls="splash-nav-dropdown">
		<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
			<path d="M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75ZM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5Z"/>
		</svg>
	</button>
	<nav class="splash-dropdown" id="splash-nav-dropdown" hidden>
		<a href={`${base}introduction/overview/`} class="splash-dropdown-link">Overview</a>
		<a href={`${base}getting-started/quick-start/`} class="splash-dropdown-link">Quick Start</a>
		<a href={`${base}reference/cli/`} class="splash-dropdown-link">CLI</a>
		<a href={`${base}guides/ui/`} class="splash-dropdown-link">UI</a>
		<a href={`${base}faq/`} class="splash-dropdown-link">FAQ</a>
	</nav>
</div>

<style>
	.custom-header-links {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}

	.header-link {
		color: var(--sl-color-text);
		text-decoration: none;
		font-size: 0.875rem;
		font-weight: 400;
		padding: 6px 10px;
		border-radius: 6px;
		transition: color 0.15s ease, background-color 0.15s ease;
		white-space: nowrap;
		opacity: 0.8;
	}

	.header-link:hover {
		opacity: 1;
		background-color: rgba(110, 118, 129, 0.15);
	}

	/* Splash-only hamburger: hidden by default, shown only on mobile splash pages */
	.splash-hamburger-btn {
		margin-top: -3px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0.5rem;
		color: var(--sl-color-text);
		border-radius: 6px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.splash-hamburger-btn:hover {
		background-color: rgba(110, 118, 129, 0.15);
	}

	.splash-dropdown {
		position: absolute;
		top: calc(100% + 0.5rem);
		right: 0;
		background: #000000;
		border: 1px solid #191f1b;
		border-radius: 16px;
		padding: 12px;
		min-width: 200px;
		z-index: 100;
		box-shadow:
			rgba(0, 0, 0, 0.01) 0px 100px 80px,
			rgba(0, 0, 0, 0.02) 0px 41px 33px,
			rgba(0, 0, 0, 0.02) 0px 22px 17px,
			rgba(0, 0, 0, 0.3) 0px 6px 12px;
	}

	:global(:root[data-theme='light']) .splash-dropdown {
		background: #ffffff;
		border: 1px solid #d1d9e0;
		box-shadow:
			rgba(31, 35, 40, 0.04) 0px 100px 80px,
			rgba(31, 35, 40, 0.06) 0px 41px 33px,
			rgba(31, 35, 40, 0.12) 0px 6px 12px;
	}

	.splash-dropdown-link {
		display: block;
		padding: 6px 16px;
		color: #ffffff;
		text-decoration: none;
		font-size: 0.875rem;
		font-weight: 400;
		line-height: 24px;
		border-radius: 8px;
		transition: background-color 0.15s ease;
	}

	.splash-dropdown-link:hover {
		background-color: rgba(110, 118, 129, 0.2);
	}

	:global(:root[data-theme='light']) .splash-dropdown-link {
		color: #1f2328;
	}

	:global(:root[data-theme='light']) .splash-dropdown-link:hover {
		background-color: rgba(175, 184, 193, 0.2);
	}
</style>

<script>
	let splashAbort: AbortController | undefined;

	function initSplashMenu() {
		splashAbort?.abort();
		splashAbort = new AbortController();
		const { signal } = splashAbort;

		const btn = document.querySelector<HTMLButtonElement>('.splash-hamburger-btn');
		const dropdown = document.querySelector<HTMLElement>('.splash-dropdown');
		if (!btn || !dropdown) return;

		btn.addEventListener('click', (e) => {
			e.stopPropagation();
			const isOpen = btn.getAttribute('aria-expanded') === 'true';
			btn.setAttribute('aria-expanded', String(!isOpen));
			dropdown.hidden = isOpen;
		}, { signal });

		document.addEventListener('click', (e) => {
			if (!btn.contains(e.target as Node) && !dropdown.contains(e.target as Node)) {
				btn.setAttribute('aria-expanded', 'false');
				dropdown.hidden = true;
			}
		}, { signal });

		document.addEventListener('keydown', (e) => {
			if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') {
				btn.setAttribute('aria-expanded', 'false');
				dropdown.hidden = true;
				btn.focus();
			}
		}, { signal });
	}

	initSplashMenu();
	document.addEventListener('astro:page-load', initSplashMenu);
</script>