From f51995244113516bd665e3e810b31a5f0e8ef4f1 Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Wed, 7 Jan 2026 13:49:46 +1000
Subject: [PATCH] fix: reorder navbar for better UX and logical grouping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #7

New order:
- Core Product: Tools, Agents, How It Works, Playground, Integrations
- Separator
- Developer Section: Docs, SDK, Spec, Changelog, FAQ, Stats

Changes:
- Reorder links in AppHeader for desktop navigation
- Add visual separator between product and developer sections
- Make Tools/Agents links bold for visual hierarchy
- Update MobileMenu with same ordering

🤖 Generated with [Claude Code](https://claude.ai/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/AppHeader.tsx  | 52 ++++++++++++++++----------
 apps/web/src/components/MobileMenu.tsx | 10 +++--
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/apps/web/src/components/AppHeader.tsx b/apps/web/src/components/AppHeader.tsx
index e68c667..fe09957 100644
--- a/apps/web/src/components/AppHeader.tsx
+++ b/apps/web/src/components/AppHeader.tsx
@@ -32,39 +32,48 @@ export function AppHeader(): React.ReactElement {
           <>
             {/* Desktop Navigation - hidden on mobile */}
             <div className="hidden md:flex items-center gap-4">
+              {/* Core Product Links */}
               <Link href="/tool/tool-search">
-                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-foreground hover:text-foreground font-semibold"
+                >
                   Tools
                 </Button>
               </Link>
               <Link href="/dashboard/agents">
-                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-foreground hover:text-foreground font-semibold"
+                >
                   Agents
                 </Button>
               </Link>
-              <Link href="/docs">
-                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
-                  Docs
-                </Button>
-              </Link>
               <Link href="/how-it-works">
                 <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
                   How It Works
                 </Button>
               </Link>
-              <Link href="/integrations">
-                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
-                  Integrations
-                </Button>
-              </Link>
               <a href="https://playground.tpmjs.com" target="_blank" rel="noopener noreferrer">
                 <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
                   Playground
                 </Button>
               </a>
-              <Link href="/spec">
+              <Link href="/integrations">
                 <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
-                  Spec
+                  Integrations
+                </Button>
+              </Link>
+
+              {/* Separator */}
+              <span className="text-foreground-tertiary">|</span>
+
+              {/* Developer Section */}
+              <Link href="/docs">
+                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+                  Docs
                 </Button>
               </Link>
               <Link href="/sdk">
@@ -72,6 +81,16 @@ export function AppHeader(): React.ReactElement {
                   SDK
                 </Button>
               </Link>
+              <Link href="/spec">
+                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+                  Spec
+                </Button>
+              </Link>
+              <Link href="/changelog">
+                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
+                  Changelog
+                </Button>
+              </Link>
               <Link href="/faq">
                 <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
                   FAQ
@@ -82,11 +101,6 @@ export function AppHeader(): React.ReactElement {
                   Stats
                 </Button>
               </Link>
-              <Link href="/changelog">
-                <Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
-                  Changelog
-                </Button>
-              </Link>
               <a
                 href="https://discord.gg/KuJRBCn89c"
                 target="_blank"
diff --git a/apps/web/src/components/MobileMenu.tsx b/apps/web/src/components/MobileMenu.tsx
index bbdb691..f256a18 100644
--- a/apps/web/src/components/MobileMenu.tsx
+++ b/apps/web/src/components/MobileMenu.tsx
@@ -12,17 +12,19 @@ interface MobileMenuProps {
 }
 
 const navLinks = [
+  // Core Product Links
   { href: '/tool/tool-search', label: 'Tools' },
   { href: '/dashboard/agents', label: 'Agents' },
-  { href: '/docs', label: 'Docs' },
   { href: '/how-it-works', label: 'How It Works' },
-  { href: '/integrations', label: 'Integrations' },
   { href: 'https://playground.tpmjs.com', label: 'Playground', external: true },
-  { href: '/spec', label: 'Spec' },
+  { href: '/integrations', label: 'Integrations' },
+  // Developer Section
+  { href: '/docs', label: 'Docs' },
   { href: '/sdk', label: 'SDK' },
+  { href: '/spec', label: 'Spec' },
+  { href: '/changelog', label: 'Changelog' },
   { href: '/faq', label: 'FAQ' },
   { href: '/stats', label: 'Stats' },
-  { href: '/changelog', label: 'Changelog' },
 ];
 
 const socialLinks = [