diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index d1cabe2..5c2de71 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -5,26 +5,32 @@ import { getSelectedNetwork, switchNetwork, type NetworkId } from '@/lib/network export type Page = 'discover' | 'jobs' | 'leaderboard' | 'validators' | 'arbitrators' | 'how-it-works' | 'get-started' | 'dashboard'; -const NETWORK_PAGES: Page[] = ['validators', 'arbitrators', 'how-it-works']; -const USER_PAGES: Page[] = ['dashboard', 'get-started']; +// Pages collapsed under the "More" dropdown — secondary content the +// average first-time visitor doesn't need surfaced. +const MORE_PAGES: Page[] = ['leaderboard', 'validators', 'arbitrators']; interface NavItem { href: string; label: string; page: Page } +// Primary nav — the four things a new visitor actually wants to do: +// 1. browse Agents (the registry) +// 2. browse Jobs (the marketplace) +// 3. deploy their own agent (Get Started — has the video walkthrough) +// 4. understand the system (How It Works) const MAIN_NAV: NavItem[] = [ - { href: '/', label: 'Discover', page: 'discover' }, + { href: '/', label: 'Agents', page: 'discover' }, { href: '/jobs', label: 'Jobs', page: 'jobs' }, - { href: '/leaderboard', label: 'Leaderboard', page: 'leaderboard' }, + { href: '/get-started', label: 'Get Started', page: 'get-started' }, + { href: '/how-it-works', label: 'How It Works', page: 'how-it-works' }, ]; -const NETWORK_ITEMS: NavItem[] = [ +// Secondary — power-user / network-participant content. Previously the +// "Network" dropdown mixed entity types (Validators, Arbitrators) with +// a docs page (How It Works) and clashed semantically with the +// [mainnet] badge. Now: a clean "More" with only directories. +const MORE_ITEMS: NavItem[] = [ + { href: '/leaderboard', label: 'Leaderboard', page: 'leaderboard' }, { href: '/validators', label: 'Validators', page: 'validators' }, { href: '/arbitrators', label: 'Arbitrators', page: 'arbitrators' }, - { href: '/how-it-works', label: 'How It Works', page: 'how-it-works' }, -]; - -const USER_MENU_ITEMS: NavItem[] = [ - { href: '/dashboard', label: 'Dashboard', page: 'dashboard' }, - { href: '/get-started', label: 'Get Started', page: 'get-started' }, ]; function NetworkBadge() { @@ -58,19 +64,18 @@ function NetworkBadge() { export function Header({ activePage }: { activePage?: Page }) { const { session, loading, login, logout } = useProton(); const [menuOpen, setMenuOpen] = useState(false); - const [networkOpen, setNetworkOpen] = useState(false); + const [moreOpen, setMoreOpen] = useState(false); const [userOpen, setUserOpen] = useState(false); - const [mobileNetworkOpen, setMobileNetworkOpen] = useState(false); - const networkRef = useRef(null); + const moreRef = useRef(null); const userRef = useRef(null); - const isNetworkActive = NETWORK_PAGES.includes(activePage as Page); - const isUserActive = USER_PAGES.includes(activePage as Page); + const isMoreActive = MORE_PAGES.includes(activePage as Page); + const isUserActive = activePage === 'dashboard'; // Close dropdowns on outside click useEffect(() => { function handleClick(e: MouseEvent) { - if (networkRef.current && !networkRef.current.contains(e.target as Node)) setNetworkOpen(false); + if (moreRef.current && !moreRef.current.contains(e.target as Node)) setMoreOpen(false); if (userRef.current && !userRef.current.contains(e.target as Node)) setUserOpen(false); } document.addEventListener('mousedown', handleClick); @@ -101,32 +106,32 @@ export function Header({ activePage }: { activePage?: Page }) { - {/* Desktop nav — center links */} + {/* Desktop nav — primary links + "More" dropdown */}