fix: product subdomain cleanup

2026-07-23 20:52:49 -04:00
parent a6ef4d2955
commit 8e33af43a5
39 changed files with 1597 additions and 630 deletions
--- a/src/components/SubdomainHeader.tsx
+++ b/src/components/SubdomainHeader.tsx
@@ -0,0 +1,87 @@
+/**
+ * Minimal top navigation for product subdomains.
+ *
+ * Replaces the dual-left/right sidebar used on `freno.me` for each product
+ * subdomain (`nessa.*`, `lineage.*`, `gaze.*`, `inputhalo.*`). The header is
+ * sticky, site-aware, and derives its links from `NAV_CONFIG` so the nav set
+ * remains the single source of truth. `lineage.freno.me/` intentionally does
+ * not use this component so the original full-bleed parallax landing page is
+ * preserved.
+ */
+import { For, Show } from "solid-js";
+import { A, useLocation } from "@solidjs/router";
+import { useSite } from "~/context/SiteContext";
+import { NAV_CONFIG, BACK_TO_FRENO } from "~/lib/nav-config";
+
+export default function SubdomainHeader() {
+  const site = useSite();
+  const location = useLocation();
+
+  const brandName = () => site().displayName;
+  const brandColor = () => site().brandColor;
+  const navItems = () =>
+    NAV_CONFIG[site().id].filter((item) => item.label !== "Home");
+
+  const isActive = (href: string) => {
+    const path = location.pathname;
+    return href === "/" ? path === "/" : path === href;
+  };
+
+  return (
+    <header class="bg-base/80 border-surface0 sticky top-0 z-50 w-full border-b backdrop-blur-md">
+      <div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4">
+        <A
+          href="/"
+          class="text-lg font-bold tracking-tight transition-opacity hover:opacity-80"
+          style={{ color: brandColor() }}
+        >
+          {brandName()}
+        </A>
+
+        <nav
+          aria-label={`${brandName()} navigation`}
+          class="flex items-center gap-4 overflow-x-auto text-sm whitespace-nowrap"
+        >
+          <For each={navItems()}>
+            {(item) => (
+              <Show
+                when={item.external}
+                fallback={
+                  <A
+                    href={item.href}
+                    end
+                    class="transition-opacity hover:opacity-80"
+                    classList={{
+                      "font-semibold": isActive(item.href),
+                      "opacity-70": !isActive(item.href)
+                    }}
+                  >
+                    {item.label}
+                  </A>
+                }
+              >
+                <a
+                  href={item.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="opacity-70 transition-opacity hover:opacity-100"
+                >
+                  {item.label}
+                </a>
+              </Show>
+            )}
+          </For>
+
+          <a
+            href={BACK_TO_FRENO.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-text/60 hover:text-text text-xs transition-colors"
+          >
+            {BACK_TO_FRENO.label}
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}