header: move 728x90 banner inline between logo and right-side icons

This commit is contained in:
Ryan Salazar
2026-05-22 01:12:16 +00:00
parent e7b5c29a07
commit 7abd613113

View File

@@ -377,7 +377,7 @@ export default function Header() {
<div className={`sticky top-0 z-50 transition-shadow duration-200 ${scrolled ? "shadow-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"> <nav className="bg-[#111111] border-b border-[#252525]" role="navigation" aria-label="Main navigation">
<div className="max-w-container mx-auto px-4"> <div className="max-w-container mx-auto px-4">
<div className="flex items-center justify-between h-[60px] gap-4"> <div className="flex items-center justify-between h-[96px] gap-4">
{/* Logo */} {/* Logo */}
<Link href="/home-page" className="flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] focus-visible:ring-offset-1 focus-visible:ring-offset-[#111]"> <Link href="/home-page" className="flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] focus-visible:ring-offset-1 focus-visible:ring-offset-[#111]">
<AppImage <AppImage
@@ -390,10 +390,13 @@ export default function Header() {
/> />
</Link> </Link>
{/* Nav items moved to the Browse bar that sits below the {/* Header 728x90 banner — centered between logo and right side */}
header leaderboard banner. Only the notification bell + {ADS_728X90.length > 0 && (
search remain in the top sticky row. */} <div className="hidden md:flex flex-1 justify-center min-w-0 overflow-hidden">
<div className="flex-1" aria-hidden="true" /> <AdImage ad={shuffle(ADS_728X90)[0]} priority page="header" />
</div>
)}
<div className="hidden lg:flex items-center gap-3"> <div className="hidden lg:flex items-center gap-3">
<Link <Link
href="/reading-list" href="/reading-list"
@@ -526,15 +529,6 @@ export default function Header() {
</nav> </nav>
</div> </div>
{/* HEADER LEADERBOARD — site-wide 728x90 between main nav and the ticker */}
{ADS_728X90.length > 0 && (
<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">
<AdImage ad={shuffle(ADS_728X90)[0]} priority page="header" />
</div>
</div>
)}
{/* BROWSE BAR — search left, primary nav right */} {/* BROWSE BAR — search left, primary nav right */}
<div className="bb-browse-bar hidden md:block" role="navigation" aria-label="Browse sections"> <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="max-w-container mx-auto px-4">