fix: unify responsive design across documentation portal

scripts/generate-portal.ts

@@ -16,19 +16,19 @@ const code = (s: string) =>
 const navigation = [
   ["/getting-started", "Get started"],
   ["/tutorial", "Tutorial"],
-  ["/architecture", "Architecture"],
-  ["/language", ".wrn language"],
   ["/packages", "Packages"],
+  ["/guides/project-structure", "Guides"],
+  ["/language", ".wrn language"],
   ["/examples", "Examples"],
-  ["/roadmap", "Roadmap"],
-  ["/changelog", "Changelog"],
-  ["/security", "Security"],
-  ["/support", "Support"],
   ["/search", "Search"],
 ] as const;
 
 function shell(title: string, description: string, body: string, section = "Documentation") {
   const nav = navigation.map(([href, label]) => `<a href="${href}">${label}</a>`).join("");
+  const breadcrumbs =
+    title === "Home"
+      ? ""
+      : `<nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>${section}</span><span aria-hidden="true">/</span><span aria-current="page">${title}</span></nav>`;
   return `page ${title.replace(/[^A-Za-z0-9]/g, "") || "Guide"} {
   seo {
     title = "${title.replaceAll('"', "'")}"
@@ -38,9 +38,9 @@ function shell(title: string, description: string, body: string, section = "Docu
   view {
     <a class="skip-link" href="#main">Skip to content</a>
     <div class="docs-shell">
-      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary">${nav}</nav><a class="preview-pill" href="/access">Private preview · v${version}</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme">Theme</button></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary">${nav}</nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v${version}</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
       <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav>${nav}</nav></details></div>
-      <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>${section}</span><span aria-hidden="true">/</span><span aria-current="page">${title}</span></nav>${body}</main>
+      <main id="main" class="portal-main">${breadcrumbs}${body}</main>
       <footer><p><strong>WRNexusJS ${version}</strong> · Private Developer Preview · Bun-native</p><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p>WRNexusJS is created by <a href="https://workroot.in/">WorkRoot</a>. WRNexus is a separate SaaS product.</p></footer>
     </div>
   }