From 8e7e15242287505224524ec22c0c3b49957f1be3 Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Tue, 19 May 2026 23:08:05 +0000
Subject: [PATCH] header: move primary nav to a Browse bar below the 728x90
 leaderboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The main sticky top row now holds only the logo, Reading List icon,
notification bell, and search box. The Events dropdown, navLinks
(Newsletter, Forum), and About dropdown were lifted out of the top
row and re-rendered in a new "Browse bar" that sits directly below
the header leaderboard banner.

Visual result:
  [ top utility bar (account / admin) ]
  [ logo                          📑 🔔 🔍 ]
  [ 728x90 leaderboard ]
  [ Events ▾  Newsletter  Forum  About ▾ ]   ← new Browse bar
  [ LIVE WIRE ····                       ]
  [ RECENT FORUM POSTS ····              ]

The mobile hamburger drawer is unchanged — it already keeps all the
nav items consolidated for small screens.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/Header.tsx | 66 ++++++++++++++-------------------------
 1 file changed, 23 insertions(+), 43 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 0580115..cb53b69 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -334,48 +334,11 @@ export default function Header() {
                 />
               </Link>
 
-              {/* Desktop Nav Links — arrow key navigable + dropdowns */}
-              <div className="hidden lg:flex items-stretch gap-5" role="list" aria-label="Site sections">
-{/* nav-desktop-redesign:start */}
-<EventsDropdown />
-{/* nav-desktop-redesign:end */}
-
-                {navLinks?.map((link, i) => (
-                  <div
-                    key={link?.label}
-                    className="relative group/nav"
-                    role="listitem">
-                    <Link
-                      href={link?.href}
-                      ref={(el) => { navLinksRef.current[i] = el; }}
-                      className="nav-link-bb h-[60px] flex items-center focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6] focus-visible:ring-offset-1 focus-visible:ring-offset-[#111]"
-                      onKeyDown={(e) => handleNavKeyDown(e, i, navLinksRef)}
-                      tabIndex={i === 0 ? 0 : -1}
-                      aria-haspopup={link?.dropdown ? "true" : undefined}>
-                      {link?.label}
-                    </Link>
-                    {link?.dropdown && (
-                      <div
-                        className="absolute left-0 top-full min-w-[200px] bg-[#0d0d0d] border border-[#252525] shadow-xl rounded-sm py-1 opacity-0 invisible translate-y-1 group-hover/nav:opacity-100 group-hover/nav:visible group-hover/nav:translate-y-0 group-focus-within/nav:opacity-100 group-focus-within/nav:visible group-focus-within/nav:translate-y-0 transition-all duration-150 z-50"
-                        role="menu"
-                        aria-label={`${link.label} categories`}>
-                        {link.dropdown.map((sub) => (
-                          <Link
-                            key={sub.href + sub.label}
-                            href={sub.href}
-                            role="menuitem"
-                            className="block px-4 py-2 text-xs font-body text-[#bbb] hover:bg-[#1a1a1a] hover:text-[#3b82f6] focus:outline-none focus-visible:bg-[#1a1a1a] focus-visible:text-[#3b82f6] uppercase tracking-wider transition-colors">
-                            {sub.label}
-                          </Link>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                ))}
-                {/* nav-desktop-redesign:after */}
-<AboutDropdown />
-{/* nav-desktop-redesign:after:end */}
-{/* Reading List Icon Link */}
+              {/* Nav items moved to the Browse bar that sits below the
+                  header leaderboard banner. Only the notification bell +
+                  search remain in the top sticky row. */}
+              <div className="flex-1" aria-hidden="true" />
+              <div className="hidden lg:flex items-center gap-3">
                 <Link
                   href="/reading-list"
                   aria-label="Reading List"
@@ -384,7 +347,6 @@ export default function Header() {
                     <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
                   </svg>
                 </Link>
-                {/* Notification Bell */}
                 <NotificationCenter />
               </div>
 
@@ -569,6 +531,24 @@ export default function Header() {
           </div>
         </div>
       )}
+
+      {/* BROWSE BAR — primary nav (was previously above the banner) */}
+      <div className="bb-browse-bar hidden md:block" role="navigation" aria-label="Browse sections">
+        <div className="max-w-container mx-auto px-4">
+          <div className="bb-browse-row">
+            <EventsDropdown />
+            {navLinks.map((link) => (
+              <Link
+                key={link.label}
+                href={link.href}
+                className="bb-browse-item">
+                {link.label}
+              </Link>
+            ))}
+            <AboutDropdown />
+          </div>
+        </div>
+      </div>
     </>
   );
 }
\ No newline at end of file