diff --git a/changelog.d/fix-header.changed.md b/changelog.d/fix-header.changed.md new file mode 100644 index 00000000..e26ede23 --- /dev/null +++ b/changelog.d/fix-header.changed.md @@ -0,0 +1 @@ +Match PE header to policyengine.org: add country selector, slide-in mobile menu. diff --git a/dashboard/src/components/Header.jsx b/dashboard/src/components/Header.jsx new file mode 100644 index 00000000..7159777f --- /dev/null +++ b/dashboard/src/components/Header.jsx @@ -0,0 +1,261 @@ +'use client'; + +import { useState, useRef, useEffect } from 'react'; +import { IconMenu2, IconChevronDown, IconWorld, IconX } from '@tabler/icons-react'; +import { assetUrl } from '../utils/basePath'; + +const NAV_ITEMS = [ + { label: 'Research', href: 'https://policyengine.org/us/research' }, + { label: 'Model', href: 'https://policyengine.org/us/model' }, + { + label: 'About', + hasDropdown: true, + items: [ + { label: 'Team', href: 'https://policyengine.org/us/team' }, + { label: 'Supporters', href: 'https://policyengine.org/us/supporters' }, + ], + }, + { label: 'Donate', href: 'https://policyengine.org/us/donate' }, +]; + +const COUNTRIES = [ + { id: 'us', label: 'United States' }, + { id: 'uk', label: 'United Kingdom' }, +]; + +const linkStyle = { + color: '#fff', + fontWeight: 500, + fontSize: '18px', + textDecoration: 'none', + fontFamily: "'Inter', sans-serif", +}; + +export default function Header() { + const [aboutOpen, setAboutOpen] = useState(false); + const [countryOpen, setCountryOpen] = useState(false); + const [mobileOpen, setMobileOpen] = useState(false); + const aboutRef = useRef(null); + const countryRef = useRef(null); + + useEffect(() => { + function handleClick(e) { + if (aboutRef.current && !aboutRef.current.contains(e.target)) setAboutOpen(false); + if (countryRef.current && !countryRef.current.contains(e.target)) setCountryOpen(false); + } + document.addEventListener('mousedown', handleClick); + return () => document.removeEventListener('mousedown', handleClick); + }, []); + + return ( +
+
+ {/* Left: Logo + Desktop Nav */} +
+ + PolicyEngine + + + +
+ + {/* Right: Country selector (desktop) */} +
+
+ + {countryOpen && ( +
+ {COUNTRIES.map((c) => ( + + {c.label} + + ))} +
+ )} +
+
+ + {/* Mobile: Country selector + hamburger */} +
+
+ +
+ +
+
+ + {/* Mobile slide-in menu */} + {mobileOpen && ( + <> +
setMobileOpen(false)} + /> +
+
+ Menu + +
+
+ {NAV_ITEMS.map((item) => + item.hasDropdown ? ( +
+ + {item.label} + +
+ {item.items.map((sub) => ( + + {sub.label} + + ))} +
+
+ ) : ( + + {item.label} + + ), + )} +
+
+ + )} +
+ ); +}