Add layout shell with header, footer, and theme toggle

frontend/src/components/layout/header.tsx

@@ -0,0 +1,34 @@
+import { Link } from '@tanstack/react-router'
+import type { Globals, Menu } from '@/lib/types'
+import { ThemeToggle } from './theme-toggle'
+
+type Props = {
+  globals: Globals
+  menu: Menu | undefined
+}
+
+export function Header({ globals, menu }: Props) {
+  return (
+    <header className="bg-muted/50">
+      <div className="flex h-16 items-center gap-4 px-4">
+        <Link to="/" className="text-base font-semibold hover:no-underline">
+          {globals.site_name}
+        </Link>
+        <nav className="flex gap-1 pl-2">
+          {menu?.items.map((item) => (
+            <a
+              key={item.label}
+              href={item.url ?? '#'}
+              className="px-2 py-1 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+            >
+              {item.label}
+            </a>
+          ))}
+        </nav>
+        <div className="ml-auto">
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+  )
+}