Init

1 files changed, 121 insertions, 0 deletions

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>
+        );
+};