-
-
- {mobileOpen && (
- <>
-
-
- })
-
-
-
-
-
-
-
-
-
-
-
-
- {countryOpen && (
-
-
- {COUNTRIES.map((c) => (
-
- {c.label}
-
- ))}
-
- )}
-
-
-
-
- setMobileOpen(false)}
- />
-
);
}
diff --git a/src/components/ModelLink.jsx b/src/components/ModelLink.jsx
new file mode 100644
index 0000000..62c6b07
--- /dev/null
+++ b/src/components/ModelLink.jsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { colors, typography, spacing } from '@policyengine/design-system/tokens';
+
+export default function ModelLink() {
+ return (
+
-
-
- )}
-
+
- Menu
-
-
-
- {NAV_ITEMS.map((item) =>
- item.hasDropdown ? (
-
-
-
- {item.label}
-
-
- ) : (
-
- {item.label}
-
- ),
- )}
-
- {item.items.map((sub) => (
-
- {sub.label}
-
- ))}
-
-
+
+ + Variables and parameters +
++ Use variable names as keys in your household object, and parameter + names to explore the policy rules that drive the simulation. Browse the + full list in the model explorer. +
+ { + e.currentTarget.style.backgroundColor = colors.primary[600]; + e.currentTarget.style.borderColor = colors.primary[600]; + e.currentTarget.style.transform = 'translateY(-2px)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.backgroundColor = colors.primary[500]; + e.currentTarget.style.borderColor = colors.primary[500]; + e.currentTarget.style.transform = 'translateY(0)'; + }} + > + Explore variables and parameters → + +
-
- );
-}
-
-function ParameterCard({ name, parameter }) {
- return (
-
-
- {name}
-
- {variable.entity}
-
- - {variable.label || variable.description || 'No description available'} -
-
- {variable.unit && (
- {variable.unit}
- )}
- {variable.definitionPeriod && (
- {variable.definitionPeriod}
- )}
- {variable.valueType && (
- {variable.valueType}
- )}
-
-
-
- );
-}
-
-export default function VariableExplorer() {
- const [metadata, setMetadata] = useState(null);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
- const [search, setSearch] = useState('');
- const [tab, setTab] = useState('variables');
- const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
-
- useEffect(() => {
- fetch(METADATA_URL)
- .then((res) => {
- if (!res.ok) throw new Error(`HTTP ${res.status}`);
- return res.json();
- })
- .then((data) => {
- setMetadata(data.result || data);
- setLoading(false);
- })
- .catch((err) => {
- setError(err.message);
- setLoading(false);
- });
- }, []);
-
- const filtered = useMemo(() => {
- if (!metadata) return [];
- const source = tab === 'variables' ? metadata.variables : metadata.parameters;
- if (!source) return [];
- const entries = Object.entries(source);
- if (!search.trim()) return entries;
- const q = search.toLowerCase();
- return entries.filter(([name, item]) => {
- return (
- name.toLowerCase().includes(q) ||
- (item.label && item.label.toLowerCase().includes(q)) ||
- (item.description && item.description.toLowerCase().includes(q))
- );
- });
- }, [metadata, search, tab]);
-
- const visible = filtered.slice(0, visibleCount);
-
- useEffect(() => {
- setVisibleCount(PAGE_SIZE);
- }, [search, tab]);
-
- return (
- {name}
- - {parameter.label || parameter.description || 'No description available'} -
- {parameter.unit && ( - {parameter.unit} - )} -
-
- Variable and parameter explorer
-- Browse the full list of variables and parameters available in the US tax-benefit model. - Use variable names as keys in your household object. -
- -
-
-
-
-
-
-
-
- {loading && (
-
-
- )}
-
- {error && (
-
-
- )}
-
- {!loading && !error && (
- <>
- - {filtered.length.toLocaleString()} {tab} found - {search && ` matching "${search}"`} -
-
- {visible.map(([name, item]) =>
- tab === 'variables' ? (
-
- {visibleCount < filtered.length && (
-
-
-
- )}
-
- )}
-
+
+
+ {(open || contentHeight > 0) && (
+ <>
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+ 
;
+
+ return (
+
+ {logoImage}
+
+ );
+}
diff --git a/src/components/homeHeader/MobileMenu.jsx b/src/components/homeHeader/MobileMenu.jsx
new file mode 100644
index 0000000..72a0f76
--- /dev/null
+++ b/src/components/homeHeader/MobileMenu.jsx
@@ -0,0 +1,141 @@
+'use client';
+
+import { useEffect } from 'react';
+import { IconMenu2, IconX } from '@tabler/icons-react';
+import { colors, spacing, typography } from '@policyengine/design-system/tokens';
+import CountrySelector from './CountrySelector';
+
+export default function MobileMenu({ opened, onOpen, onClose, navItems }) {
+ // Lock body scroll when sheet is open
+ useEffect(() => {
+ if (opened) {
+ document.body.style.overflow = 'hidden';
+ } else {
+ document.body.style.overflow = '';
+ }
+ return () => {
+ document.body.style.overflow = '';
+ };
+ }, [opened]);
+
+ return (
+ <>
+ {/* Mobile Burger Menu with Country Selector */}
+
setOpen(false)}
+ style={{ position: 'fixed', inset: 0, zIndex: 999, cursor: 'default' }}
+ />
+
+ );
+}
diff --git a/src/components/homeHeader/DesktopNavigation.jsx b/src/components/homeHeader/DesktopNavigation.jsx
new file mode 100644
index 0000000..f8d1169
--- /dev/null
+++ b/src/components/homeHeader/DesktopNavigation.jsx
@@ -0,0 +1,13 @@
+'use client';
+
+import NavItem from './NavItem';
+
+export default function DesktopNavigation({ navItems }) {
+ return (
+
+
+
+ )}
+
+ {countries.map((country, i) => (
+
+ ))}
+
+
+ {navItems.map((item) => (
+
+ );
+}
diff --git a/src/components/homeHeader/HeaderActionButtons.jsx b/src/components/homeHeader/HeaderActionButtons.jsx
new file mode 100644
index 0000000..126c352
--- /dev/null
+++ b/src/components/homeHeader/HeaderActionButtons.jsx
@@ -0,0 +1,7 @@
+'use client';
+
+import CountrySelector from './CountrySelector';
+
+export default function HeaderActionButtons() {
+ return
+
+ );
+}
diff --git a/src/components/homeHeader/HeaderLogo.jsx b/src/components/homeHeader/HeaderLogo.jsx
new file mode 100644
index 0000000..fc1c078
--- /dev/null
+++ b/src/components/homeHeader/HeaderLogo.jsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { spacing } from '@policyengine/design-system/tokens';
+const PolicyEngineLogo = '/us/api/assets/logos/policyengine/white.svg';
+
+const logoContainerStyles = {
+ display: 'flex',
+ alignItems: 'center',
+ cursor: 'pointer',
+};
+
+const logoImageStyles = {
+ height: '24px',
+ width: 'auto',
+ marginRight: 12,
+};
+
+export default function HeaderLogo() {
+ const logoImage =
+
+
+
+
+
+
+
+
+
+
+ {/* Mobile Sheet — matches Radix Sheet side="right" */}
+ {opened && (
+ <>
+ {/* Overlay */}
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+
+ {/* Panel */}
+
+ {/* SheetHeader */}
+
+
+ )}
+
+ );
+}
diff --git a/src/components/homeHeader/NavItem.jsx b/src/components/homeHeader/NavItem.jsx
new file mode 100644
index 0000000..f711bf3
--- /dev/null
+++ b/src/components/homeHeader/NavItem.jsx
@@ -0,0 +1,235 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { IconChevronDown } from '@tabler/icons-react';
+import { colors, typography } from '@policyengine/design-system/tokens';
+
+const navItemStyle = {
+ color: colors.text.inverse,
+ fontWeight: typography.fontWeight.medium,
+ fontSize: '15px',
+ fontFamily: typography.fontFamily.primary,
+ textDecoration: 'none',
+ padding: '6px 14px',
+ borderRadius: '6px',
+ transition: 'background-color 0.15s ease',
+ letterSpacing: '0.01em',
+};
+
+const hoverHandlers = {
+ onMouseEnter: (e) => {
+ e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.12)';
+ },
+ onMouseLeave: (e) => {
+ e.currentTarget.style.backgroundColor = 'transparent';
+ },
+};
+
+/**
+ * Check if href is a relative path (internal) vs absolute URL (external).
+ */
+function isInternalHref(href) {
+ return !!href && href.startsWith('/');
+}
+
+/**
+ * Apple-style dropdown panel with smooth height reveal and content fade.
+ */
+function AppleDropdown({ items, open, onClose }) {
+ const contentRef = useRef(null);
+ const [contentHeight, setContentHeight] = useState(0);
+ const [visible, setVisible] = useState(false);
+
+ useEffect(() => {
+ if (open && contentRef.current) {
+ setContentHeight(contentRef.current.scrollHeight);
+ requestAnimationFrame(() => setVisible(true));
+ } else {
+ setVisible(false);
+ const timer = setTimeout(() => setContentHeight(0), 250);
+ return () => clearTimeout(timer);
+ }
+ }, [open]);
+
+ const handleSelect = useCallback(
+ (item) => {
+ onClose();
+ if (item.href) {
+ window.location.href = item.href;
+ } else if (item.onClick) {
+ item.onClick();
+ }
+ },
+ [onClose]
+ );
+
+ if (!open && contentHeight === 0) {
+ return null;
+ }
+
+ return (
+ <>
+ {/* Invisible click-away layer (no dim) — sits below the header's z-index */}
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+
+ {/* Dropdown panel */}
+
+ Menu
+
+
+ {/* SheetContent nav items */}
+
+ {navItems.map((item) =>
+ item.hasDropdown && item.dropdownItems ? (
+ // Render dropdown as a section
+
+
+
+ {item.label}
+
+
+ ) : (
+ // Render regular link
+
+ {item.label}
+
+ )
+ )}
+
+ {item.dropdownItems.map((dropdownItem) => (
+
+ {dropdownItem.label}
+
+ ))}
+
+
+
+
+ );
+}
+
+/**
+ * Reusable navigation item component.
+ * Can be either a simple link or a dropdown menu.
+ */
+export default function NavItem({ setup }) {
+ const { label, onClick, href, hasDropdown, dropdownItems } = setup;
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const containerRef = useRef(null);
+
+ // Close on click outside
+ useEffect(() => {
+ if (!dropdownOpen) {
+ return;
+ }
+ function handleClick(e) {
+ if (containerRef.current && !containerRef.current.contains(e.target)) {
+ setDropdownOpen(false);
+ }
+ }
+ document.addEventListener('mousedown', handleClick);
+ return () => document.removeEventListener('mousedown', handleClick);
+ }, [dropdownOpen]);
+
+ // Close on Escape
+ useEffect(() => {
+ if (!dropdownOpen) {
+ return;
+ }
+ function handleKey(e) {
+ if (e.key === 'Escape') {
+ setDropdownOpen(false);
+ }
+ }
+ document.addEventListener('keydown', handleKey);
+ return () => document.removeEventListener('keydown', handleKey);
+ }, [dropdownOpen]);
+
+ if (hasDropdown && dropdownItems) {
+ return (
+
+ {items.map((item, i) => (
+
+ ))}
+
+
+
+ setDropdownOpen(false)}
+ />
+
+ );
+ }
+
+ // Absolute URLs use standard anchor tag
+ return (
+
+ {label}
+
+ );
+}