From 713f555a6ef551e110e3d16b87377bb60ebee63e Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@profullstack.com>
Date: Wed, 21 Oct 2026 14:33:48 +0000
Subject: [PATCH] Fix navbar: one row on desktop, menu dropdown below lg

The header crammed 8 links into a max-w-3xl flex-wrap row, so the logo wrapped to two lines, 'status' orphaned onto a second row on desktop and mobile got a ragged three-line block. Widen the header to max-w-5xl, keep logo and links on one line, and fold the links into a <details> menu below lg that closes on client navigation.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/app/layout.tsx          | 20 +--------
 apps/web/src/components/site-nav.tsx | 62 ++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 18 deletions(-)
 create mode 100644 apps/web/src/components/site-nav.tsx

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index b02ce4b..d3e21ee 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -5,6 +5,7 @@ import Script from "next/script";
 import { Footer } from "@profullstack/footer/react";
 import { WebMcpProvider } from "@/components/webmcp-provider";
 import { PitFooter } from "@/components/pit-footer";
+import { SiteNav } from "@/components/site-nav";
 
 const SITE = "https://c0mpute.com";
 const DESCRIPTION =
@@ -55,24 +56,7 @@ export default function RootLayout({
       <body className="min-h-screen flex flex-col">
         <WebMcpProvider />
         <header className="border-b border-[var(--color-rule)]">
-          <nav className="max-w-3xl mx-auto px-6 py-4 flex items-center justify-between text-sm">
-            <Link
-              href="/"
-              className="!border-0 font-bold text-[var(--color-fg)] hover:text-[var(--color-accent)]"
-            >
-              <span className="accent">$</span> c0mpute
-            </Link>
-            <div className="flex flex-wrap justify-end gap-x-5 gap-y-1 text-[var(--color-dim)]">
-              <Link href="/getting-started" className="!border-0 hover:text-[var(--color-accent)]">getting-started</Link>
-              <Link href="/protocol" className="!border-0 hover:text-[var(--color-accent)]">protocol</Link>
-              <Link href="/providers" className="!border-0 accent hover:text-[var(--color-accent)]">run a node</Link>
-              <Link href="/nodes" className="!border-0 hover:text-[var(--color-accent)]">nodes</Link>
-              <Link href="/agents" className="!border-0 hover:text-[var(--color-accent)]">agents</Link>
-              <Link href="/plugins" className="!border-0 hover:text-[var(--color-accent)]">plugins</Link>
-              <Link href="/docs" className="!border-0 hover:text-[var(--color-accent)]">docs</Link>
-              <Link href="/status" className="!border-0 hover:text-[var(--color-accent)]">status</Link>
-            </div>
-          </nav>
+          <SiteNav />
         </header>
 
         <main className="flex-1">{children}</main>
diff --git a/apps/web/src/components/site-nav.tsx b/apps/web/src/components/site-nav.tsx
new file mode 100644
index 0000000..badca03
--- /dev/null
+++ b/apps/web/src/components/site-nav.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useRef } from "react";
+
+const LINKS: { href: string; label: string; accent?: boolean }[] = [
+  { href: "/getting-started", label: "getting-started" },
+  { href: "/protocol", label: "protocol" },
+  { href: "/providers", label: "run a node", accent: true },
+  { href: "/nodes", label: "nodes" },
+  { href: "/agents", label: "agents" },
+  { href: "/plugins", label: "plugins" },
+  { href: "/docs", label: "docs" },
+  { href: "/status", label: "status" },
+];
+
+// One row on desktop; below lg the links fold into a <details> menu, which works
+// without JS. The effect only closes it again after a client-side navigation.
+export function SiteNav() {
+  const pathname = usePathname();
+  const menu = useRef<HTMLDetailsElement>(null);
+  useEffect(() => {
+    if (menu.current) menu.current.open = false;
+  }, [pathname]);
+
+  const linkClass = (accent?: boolean) =>
+    `!border-0 whitespace-nowrap hover:text-[var(--color-accent)] ${accent ? "accent" : ""}`;
+
+  return (
+    <nav className="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between gap-6 text-sm">
+      <Link
+        href="/"
+        className="!border-0 shrink-0 whitespace-nowrap font-bold text-[var(--color-fg)] hover:text-[var(--color-accent)]"
+      >
+        <span className="accent">$</span> c0mpute
+      </Link>
+
+      <div className="hidden lg:flex items-center gap-x-5 text-[var(--color-dim)]">
+        {LINKS.map((l) => (
+          <Link key={l.href} href={l.href} className={linkClass(l.accent)}>
+            {l.label}
+          </Link>
+        ))}
+      </div>
+
+      <details ref={menu} className="lg:hidden relative group">
+        <summary className="list-none [&::-webkit-details-marker]:hidden cursor-pointer select-none px-3 py-1 border border-[var(--color-rule)] rounded text-[var(--color-dim)] hover:text-[var(--color-accent)] group-open:text-[var(--color-accent)]">
+          <span className="group-open:hidden">menu</span>
+          <span className="hidden group-open:inline">close</span>
+        </summary>
+        <div className="absolute right-0 top-full mt-2 z-50 min-w-48 flex flex-col py-2 bg-[var(--color-card)] border border-[var(--color-rule)] rounded shadow-lg text-[var(--color-dim)]">
+          {LINKS.map((l) => (
+            <Link key={l.href} href={l.href} className={`${linkClass(l.accent)} px-4 py-2`}>
+              {l.label}
+            </Link>
+          ))}
+        </div>
+      </details>
+    </nav>
+  );
+}