From c1e28224aa2e1450031669d9a7e359b63e04687d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 19:40:59 +0200
Subject: Init

---
 src/ui/components/SiteHeader.tsx | 121 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 src/ui/components/SiteHeader.tsx

(limited to 'src/ui/components/SiteHeader.tsx')

diff --git a/src/ui/components/SiteHeader.tsx b/src/ui/components/SiteHeader.tsx
new file mode 100644
index 0000000..17831a1
--- /dev/null
+++ b/src/ui/components/SiteHeader.tsx
@@ -0,0 +1,121 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { nav } from "../../data/nav.ts";
+import { ActionButton } from "../objects/ActionButton.tsx";
+import { Navbar } from "../objects/Navbar.tsx";
+import { NavbarItem } from "../objects/NavbarItem.tsx";
+import { Logo } from "./Logo.tsx";
+
+export type Props = HTMLAttributes<"header"> & {
+	"url": string;
+	"mode"?: "compact" | "none";
+	"at-end"?: boolean;
+	"hidden"?: boolean;
+	"sm"?: JSX.Element;
+	"end"?: JSX.Element;
+	"children"?: JSX.Element;
+};
+
+export const SiteHeader = ({
+	children,
+	sm,
+	url,
+	mode,
+	"at-end": atEnd,
+	hidden,
+	end,
+	class: cls,
+	...props
+}: Props) => {
+	const navItems = nav.map((item) => ({
+		...item,
+		selected: new RegExp(`^${item.url.replace("/#", "/")}`).test(url),
+	}));
+
+	const parent = navItems
+		.filter((item) => item.url !== url)
+		.reduce(
+			(parent: (typeof navItems)[number] | undefined, item) =>
+				item.selected && item.url.length > (parent?.url.length ?? 0) ? item : parent,
+			undefined,
+		);
+	const selected = navItems.reduce(
+		(sel, item) => (item.selected && item.url.length > sel.url.length ? item : sel),
+		{
+			icon: "",
+			label: "Back",
+			selected: true,
+			url: "/",
+		},
+	);
+
+	const variant = atEnd ? "static-white" : undefined;
+
+	return (
+		<header
+			class:list={[
+				"c-site-header",
+				"l-media",
+				{ "c-site-header--end": atEnd, "c-site-header--hidden": hidden },
+				cls,
+			]}
+			{...props}
+		>
+			<Logo class="c-site-header__logo l-media__block" variant={variant} />
+
+			{mode !== "none" && (
+				<>
+					<Navbar aria-label="Mainmenu" class="c-site-header__nav l-media__block" variant={variant}>
+						{mode === "compact" ? (
+							<NavbarItem
+								href={selected.url}
+								pre={<Icon icon="arrow-left" variant="bold" />}
+								selected
+							>
+								{selected.label}
+							</NavbarItem>
+						) : (
+							navItems
+								.filter((item) => item.url !== "/" && !item.hidden)
+								.map((item) => (
+									<NavbarItem as="a" href={item.url} selected={item.selected}>
+										{item.label}
+									</NavbarItem>
+								))
+						)}
+					</Navbar>
+
+					{parent && (
+						<ActionButton
+							align-block
+							class="c-site-header__back l-media__block"
+							href={parent.url}
+							icon={<Icon icon="arrow-left" variant="bold" />}
+							level="quiet"
+							pill
+						/>
+					)}
+				</>
+			)}
+
+			{children}
+
+			{sm && <div class="c-site-header__slot c-site-header__slot--sm">{sm}</div>}
+
+			{end && (
+				<>
+					<div class="c-site-header__spacer" />
+					<div class="c-site-header__slot c-site-header__slot--end">{end}</div>
+				</>
+			)}
+
+			<Logo
+				class="c-site-header__logo c-site-header__logo--sm l-media__block"
+				size="sm"
+				variant={variant}
+			/>
+		</header>
+	);
+};
-- 
cgit v1.3.1