From 0674d0188b2f6bad08f9a66b318d8ac9c586b0d3 Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Fri, 8 May 2026 22:25:47 +0000
Subject: [PATCH] Header redesign: dropdowns + site-wide leaderboard, drop
 secondary nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reorganize the navigation:
- navLinks now carries an optional dropdown[] per section. NEWS / GEAR &
  REVIEWS / SHOW COVERAGE / TECHNOLOGY get sub-items pulled from the old
  flat categoryLinks list.
- Desktop main nav renders each top-level item as a hover-triggered
  dropdown (CSS-only via Tailwind group-hover + group-focus-within for
  keyboard accessibility). aria-haspopup advertises the popup; the panel
  is role=menu with menuitem children.
- Mobile drawer's category list now groups by parent section instead of
  showing a flat list.
- Removed the secondary category sub-nav row that previously sat below
  the main nav (its content is in the dropdowns now).
- Added a site-wide 728x90 ad slot between the top utility bar and the
  main nav (md+ only). Uses <AdSlot zone='homepage-top'> so the existing
  ad-rotation pool serves it.

Net: 566 → ~600 lines (markup heavier than what was removed because the
dropdown panels are inline).
---
 src/components/Header.tsx | 162 ++++++++++++++++++++++++--------------
 1 file changed, 101 insertions(+), 61 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 52fbed8..84f99b0 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -15,32 +15,57 @@ import {
 import { createClient } from "@/lib/supabase/client";
 import NotificationCenter from "@/components/NotificationCenter";
 import LanguageSwitcher from "@/components/LanguageSwitcher";
+import AdSlot from "@/components/AdSlot";
 
-const navLinks = [
-  { label: "NEWS", href: "/news" },
-  { label: "GEAR & REVIEWS", href: "/gear" },
-  { label: "SHOW COVERAGE", href: "/show-coverage" },
-  { label: "TECHNOLOGY", href: "/technology" },
+interface NavItem {
+  label: string;
+  href: string;
+  dropdown?: { label: string; href: string }[];
+}
+
+const navLinks: NavItem[] = [
+  {
+    label: "NEWS",
+    href: "/news",
+    dropdown: [
+      { label: "Live Production", href: "/news?category=live-production" },
+      { label: "IP & Cloud", href: "/news?category=ip-cloud" },
+      { label: "AI & Automation", href: "/news?category=ai" },
+      { label: "People", href: "/news?category=people" },
+    ],
+  },
+  {
+    label: "GEAR & REVIEWS",
+    href: "/gear",
+    dropdown: [
+      { label: "Audio", href: "/gear?category=audio" },
+      { label: "Cameras", href: "/gear?category=cameras" },
+      { label: "Reviews", href: "/gear" },
+    ],
+  },
+  {
+    label: "SHOW COVERAGE",
+    href: "/show-coverage",
+    dropdown: [
+      { label: "NAB Show", href: "/show-coverage" },
+      { label: "IBC", href: "/show-coverage?event=ibc" },
+    ],
+  },
+  {
+    label: "TECHNOLOGY",
+    href: "/technology",
+    dropdown: [
+      { label: "Storage & MAM", href: "/technology?category=storage" },
+      { label: "Streaming", href: "/technology?category=streaming" },
+      { label: "AI & Automation", href: "/technology?category=ai" },
+    ],
+  },
   { label: "NEWSLETTER", href: "/newsletter/archive" },
   { label: "FORUM", href: "/forum" },
   { label: "ADVERTISE", href: "/advertise" },
   { label: "ABOUT", href: "/about" },
 ];
 
-const categoryLinks = [
-  { label: "Live Production", href: "/news?category=live-production" },
-  { label: "IP & Cloud", href: "/news?category=ip-cloud" },
-  { label: "Audio", href: "/gear?category=audio" },
-  { label: "Cameras", href: "/gear?category=cameras" },
-  { label: "Storage & MAM", href: "/technology?category=storage" },
-  { label: "Streaming", href: "/technology?category=streaming" },
-  { label: "AI & Automation", href: "/technology?category=ai" },
-  { label: "NAB Show", href: "/show-coverage" },
-  { label: "IBC", href: "/show-coverage?event=ibc" },
-  { label: "People", href: "/news?category=people" },
-  { label: "Reviews", href: "/gear" },
-];
-
 export default function Header() {
   const [scrolled, setScrolled] = useState(false);
   const [mobileOpen, setMobileOpen] = useState(false);
@@ -56,7 +81,6 @@ export default function Header() {
   const mobileMenuRef = useRef<HTMLDivElement>(null);
   const hamburgerRef = useRef<HTMLButtonElement>(null);
   const navLinksRef = useRef<(HTMLAnchorElement | null)[]>([]);
-  const categoryLinksRef = useRef<(HTMLAnchorElement | null)[]>([]);
 
   useEffect(() => {
     const handler = () => setScrolled(window.scrollY > 60);
@@ -336,7 +360,14 @@ export default function Header() {
         </div>
       </div>
 
-      {/* MAIN NAV + CATEGORY SUB-NAV */}
+      {/* HEADER LEADERBOARD — site-wide 728x90 between utility bar and main nav */}
+      <div className="bg-[#0a0a0a] border-b border-[#1a1a1a] py-3 hidden md:block">
+        <div className="max-w-container mx-auto px-4 flex justify-center">
+          <AdSlot zone="homepage-top" size="728x90" />
+        </div>
+      </div>
+
+      {/* MAIN NAV */}
       <div className={`sticky top-0 z-50 transition-shadow duration-200 ${scrolled ? "shadow-nav" : ""}`}>
         <nav className="bg-[#111111] border-b border-[#252525]" role="navigation" aria-label="Main navigation">
           <div className="max-w-container mx-auto px-4">
@@ -353,19 +384,39 @@ export default function Header() {
                 />
               </Link>
 
-              {/* Desktop Nav Links — arrow key navigable */}
-              <div className="hidden lg:flex items-center gap-5" role="list" aria-label="Site sections">
+              {/* Desktop Nav Links — arrow key navigable + dropdowns */}
+              <div className="hidden lg:flex items-stretch gap-5" role="list" aria-label="Site sections">
                 {navLinks?.map((link, i) => (
-                  <Link
+                  <div
                     key={link?.label}
-                    href={link?.href}
-                    ref={(el) => { navLinksRef.current[i] = el; }}
-                    role="listitem"
-                    className="nav-link-bb 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}>
-                    {link?.label}
-                  </Link>
+                    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>
                 ))}
                 {/* Reading List Icon Link */}
                 <Link
@@ -512,15 +563,24 @@ export default function Header() {
                   )}
                 </div>
                 <div className="flex flex-col gap-0 border-t border-[#252525] mt-1">
-                  {categoryLinks?.map((link) => (
-                    <Link
-                      key={link?.label}
-                      href={link?.href}
-                      className="px-2 py-2 text-xs font-body text-[#888] hover:text-accent hover:bg-[#1a1a1a] border-b border-[#222] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#3b82f6]"
-                      onClick={() => setMobileOpen(false)}>
-                      {link?.label}
-                    </Link>
-                  ))}
+                  {navLinks
+                    .filter((n) => n.dropdown && n.dropdown.length > 0)
+                    .map((section) => (
+                      <div key={section.label} className="border-b border-[#222]">
+                        <div className="px-2 py-2 text-[10px] font-body font-bold text-[#3b82f6] uppercase tracking-widest bg-[#0d0d0d]">
+                          {section.label}
+                        </div>
+                        {section.dropdown!.map((link) => (
+                          <Link
+                            key={link.href + link.label}
+                            href={link.href}
+                            className="px-4 py-2 text-xs font-body text-[#888] hover:text-accent hover:bg-[#1a1a1a] block transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#3b82f6]"
+                            onClick={() => setMobileOpen(false)}>
+                            {link.label}
+                          </Link>
+                        ))}
+                      </div>
+                    ))}
                 </div>
                 <div className="mt-3 px-2">
                   <div className="relative">
@@ -541,26 +601,6 @@ export default function Header() {
             )}
           </div>
         </nav>
-
-        {/* SECONDARY CATEGORY SUB-NAV */}
-        <nav className="bg-[#0d0d0d] border-b border-[#222] hidden lg:block" aria-label="Category navigation">
-          <div className="max-w-container mx-auto px-4">
-            <div className="flex items-center overflow-x-auto scrollbar-none h-8 gap-0" role="menubar">
-              {categoryLinks?.map((link, i) => (
-                <Link
-                  key={link?.label}
-                  href={link?.href}
-                  ref={(el) => { categoryLinksRef.current[i] = el; }}
-                  role="menuitem"
-                  className="flex-shrink-0 px-3 h-full flex items-center text-[11px] font-body font-bold text-[#888888] uppercase tracking-wide hover:text-[#3b82f6] hover:bg-[#1e1e1e] transition-colors border-r border-[#222] last:border-r-0 whitespace-nowrap focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#3b82f6]"
-                  onKeyDown={(e) => handleNavKeyDown(e, i, categoryLinksRef)}
-                  tabIndex={i === 0 ? 0 : -1}>
-                  {link?.label}
-                </Link>
-              ))}
-            </div>
-          </div>
-        </nav>
       </div>
     </>
   );