Align calculator header with main website header

.github/workflows/pr.yaml

@@ -25,11 +25,13 @@ jobs:
           # and should no longer be modified in app/.
           # Calculator components (report builder, household, charts, etc.) are
           # still legitimately modified in app/ since calculator-app/ imports from there.
+          # Note: HomeHeader.tsx and homeHeader/ were ported to website but
+          # are still actively used by the calculator-app (StandardLayout →
+          # HomeHeader). They are now de facto calculator components, so
+          # they're intentionally NOT in this guard list.
           WEBSITE_BLOCKED=$(echo "$ALL_CHANGED" | grep -E \
             -e '^app/src/components/home/' \
             -e '^app/src/components/shared/static/' \
-            -e '^app/src/components/shared/HomeHeader\.tsx' \
-            -e '^app/src/components/homeHeader/' \
             -e '^app/src/components/Footer\.tsx' \
             -e '^app/src/components/FooterSubscribe\.tsx' \
             -e '^app/src/components/blog/BlogPostCard\.tsx' \

CLAUDE.md

@@ -5,7 +5,8 @@
 The `app/` directory contains the legacy Vite build. Some parts have been ported to Next.js, others are still active.
 
 **Ported to website/ (do NOT modify in app/):**
-- Website components: `home/`, `shared/static/`, `homeHeader/`, `Footer.tsx`, `FooterSubscribe.tsx`, `blog/BlogPostCard.tsx`, `blog/BlogPostGrid.tsx`, `blog/ResearchFilters.tsx`
+- Website components: `home/`, `shared/static/`, `Footer.tsx`, `FooterSubscribe.tsx`, `blog/BlogPostCard.tsx`, `blog/BlogPostGrid.tsx`, `blog/ResearchFilters.tsx`
+  - Note: `homeHeader/` and `shared/HomeHeader.tsx` were also ported to `website/src/components/Header.tsx`, but the calculator-app still renders `HomeHeader` via `StandardLayout`, so these remain editable in `app/`. Keep the calculator header in sync with the website header when the website one changes.
 - Website pages: `Home`, `Research`, `Blog`, `Team`, `Supporters`, `Donate`, `Privacy`, `Terms`, `Brand*`, `Citations`, `AppPage`
 - `vercel.json` (root) — new rewrites go in `website/next.config.ts`
 

app/src/components/homeHeader/MobileMenu.tsx

@@ -58,7 +58,7 @@ export default function MobileMenu({ opened, onOpen, onClose, navItems }: Mobile
                     className="tw:flex tw:flex-col"
                     style={{ gap: spacing.xs, paddingLeft: spacing.md }}
                   >
-                    {item.dropdownItems.map((dropdownItem) => (
+                    {item.dropdownItems.flatMap((dropdownItem) => [
                       <a
                         key={dropdownItem.label}
                         href={dropdownItem.href}
@@ -72,8 +72,26 @@ export default function MobileMenu({ opened, onOpen, onClose, navItems }: Mobile
                         }}
                       >
                         {dropdownItem.label}
-                      </a>
-                    ))}
+                      </a>,
+                      ...(dropdownItem.children ?? []).map((grandchild) => (
+                        <a
+                          key={`${dropdownItem.label}-${grandchild.label}`}
+                          href={grandchild.href}
+                          onClick={grandchild.href ? undefined : grandchild.onClick}
+                          style={{
+                            color: colors.text.inverse,
+                            textDecoration: 'none',
+                            fontWeight: typography.fontWeight.normal,
+                            fontSize: typography.fontSize.sm,
+                            fontFamily: typography.fontFamily.primary,
+                            paddingLeft: spacing.md,
+                            opacity: 0.85,
+                          }}
+                        >
+                          {grandchild.label}
+                        </a>
+                      )),
+                    ])}
                   </div>
                 </div>
               ) : (