// Account shell — top bar, primary nav, search/help/notifications icons, // and the avatar dropdown menu. Used by every post-login page. const NAV_ITEMS = [ { key: 'overview', label: 'Overview', href: 'Account-Overview.html' }, { key: 'applications', label: 'Applications', href: 'Account-Applications.html' }, { key: 'find', label: 'Find Services', href: 'Account-Find.html' }, ]; // ─── Top bar ──────────────────────────────────────────────── function AccountTopBar({ activeNav = 'overview' }) { const t = window.tokens; const [account, setAccount] = useActiveAccount(); const profile = ACCOUNTS[account]; const counts = countByBucket(account); const unread = notifCount(account); // Arriving on any account page means we're signed in. Mirror that to // localStorage + so the public-portal headers // (Home, Apply, Confirmation) flip to the avatar pill next time the // user navigates back out to one of those pages. React.useEffect(() => { setSignedIn(true); }, []); return (
{/* LEFT — logo + primary nav */}
State of New Jersey Resident Portal
{/* RIGHT — icon buttons + avatar menu */}
); } function NavTab({ label, href, count, active }) { const t = window.tokens; return ( {label} {count != null && ( {count} )} ); } function IconBtn({ name, title, badge, href }) { const t = window.tokens; const inner = ( (e.currentTarget.style.background = t.color.surfaceHi)} onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')} > {badge != null && badge > 0 && ( {badge} )} ); if (href) return {inner}; return ; } // ─── Avatar menu (switch account · manage settings · sign out) ─ function AvatarMenu({ account, setAccount, profile }) { const t = window.tokens; const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const off = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', off); return () => document.removeEventListener('mousedown', off); }, [open]); const other = account === 'personal' ? 'business' : 'personal'; const otherProfile = ACCOUNTS[other]; const otherCounts = countByBucket(other); return (
{open && (
Signed in as
jamie.morrison@email.com
Switch account
{ setAccount(other); setOpen(false); }} />
{ setSignedIn(false); }} />
)}
); } function AccountRow({ profile, active, actionCount, onClick }) { const t = window.tokens; const [hover, setHover] = React.useState(false); return ( ); } function MenuRow({ icon, label, sub, muted, arrow, href, onClick }) { const t = window.tokens; const [hover, setHover] = React.useState(false); const inner = ( <>
{label}
{sub &&
{sub}
} {arrow && } ); const style = { display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '9px 12px', borderRadius: t.radius.sm, background: hover ? t.color.surfaceLo : 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: t.font.sans, textDecoration: 'none', }; const handlers = { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), }; if (href) return {inner}; return ; } // ─── Page shell wrapper ───────────────────────────────────── function AccountPage({ activeNav, children, maxWidth = 1240 }) { const t = window.tokens; return (
{children}
); } Object.assign(window, { AccountTopBar, AccountPage, NavTab, IconBtn, AvatarMenu, MenuRow });