Jan Wagner
88b3af4ba8
Server-Components dürfen in Next.js 16 keine Event-Handler an DOM-Elemente
oder Client-Komponenten weitergeben. Site-Header war Server-Component mit
onClick={dispatchEvent(...)} — das hat alle /ueber-mich, /projekte,
/projekte/[slug], /en mit 500er geworfen (nur / und /admin/login blieben
200, weil sie kein Site-Header-Render nutzen bzw. ein anderes Layout).
Fix: �K-Button in eigene 'use client'-Datei ausgelagert (command-bar-button.tsx)
und im Header eingebunden. Nach dem Fix: alle Routen wieder 200.
75 lines
3.2 KiB
TypeScript
75 lines
3.2 KiB
TypeScript
import Link from "next/link";
|
|
import type { Locale } from "@/i18n/routes";
|
|
import { publicPath, defaultLocale } from "@/i18n/routes";
|
|
import { getDict } from "@/i18n/dictionaries";
|
|
import { LanguageSwitcher } from "./language-switcher";
|
|
import { MobileNav } from "./mobile-nav";
|
|
import { site } from "@/content/site";
|
|
import { CommandPalette } from "./command-palette";
|
|
import { CommandBarButton } from "./command-bar-button";
|
|
|
|
export function SiteHeader({
|
|
locale,
|
|
projects,
|
|
}: {
|
|
locale: Locale;
|
|
projects: Array<{ slug: string; summary: string; category: string; status: string }>;
|
|
}) {
|
|
const dict = getDict(locale);
|
|
const nav = [
|
|
{ href: publicPath(locale, "about"), label: dict.nav.about },
|
|
{ href: publicPath(locale, "projects"), label: dict.nav.projects },
|
|
{ href: publicPath(locale, "contact"), label: dict.nav.contact },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<header className="sticky top-0 z-40 border-b border-hairline bg-[color-mix(in_oklab,var(--bg-deep)_85%,transparent)] backdrop-blur-md">
|
|
<div className="mx-auto flex max-w-[var(--max-w)] items-center justify-between gap-3 px-4 py-3 md:px-6">
|
|
<Link href={publicPath(locale, "home")} className="group flex items-center gap-2.5 font-mono text-sm" data-cursor="hover">
|
|
<span className="inline-flex h-6 w-6 items-center justify-center rounded-sm border border-accent text-[11px] font-bold text-accent transition-colors group-hover:bg-accent group-hover:text-[var(--bg-deep)]">e</span>
|
|
<span className="text-[var(--fg)]">{site.handle}</span>
|
|
<span className="hidden text-muted md:inline">@eldov.win</span>
|
|
</Link>
|
|
<div className="flex items-center gap-1 md:gap-4">
|
|
<nav className="hidden gap-1 md:flex" aria-label="primary">
|
|
{nav.map((n) => (
|
|
<Link
|
|
key={n.href}
|
|
href={n.href}
|
|
className="rounded px-3 py-1.5 font-mono text-sm text-[var(--fg-dim)] transition-colors hover:bg-[color-mix(in_oklab,var(--accent)_8%,transparent)] hover:text-accent"
|
|
data-cursor="hover"
|
|
>
|
|
{n.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className="hidden md:block">
|
|
<LanguageSwitcher currentLocale={locale} />
|
|
</div>
|
|
<CommandBarButton />
|
|
<MobileNav locale={locale} items={nav} menuLabel={dict.nav.menu} switchLabel={dict.actions.languageSwitch} />
|
|
</div>
|
|
</div>
|
|
{locale === defaultLocale ? (
|
|
<div className="border-t border-hairline-2 bg-[var(--bg-deep)]">
|
|
<div className="mx-auto max-w-[var(--max-w)] px-4 py-1 font-mono text-[11px] text-muted md:px-6">
|
|
<span className="text-accent">note:</span>{" "}
|
|
geschäftliche Anfragen bitte an{" "}
|
|
<a
|
|
href="https://w-make.com"
|
|
rel="noopener noreferrer"
|
|
className="text-[var(--fg-dim)] underline decoration-dotted underline-offset-2 hover:text-accent"
|
|
>
|
|
w-make.com
|
|
</a>
|
|
.
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</header>
|
|
<CommandPalette locale={locale} projects={projects} />
|
|
</>
|
|
);
|
|
}
|