feat: modernize header and footer by Alessandro100 · Pull Request #92 · MobilityData/mobilitydatabase-web

Alessandro100 · 2026-03-30T15:27:41Z

Summary:

closes #90

Updates the styling and functionality of the Header and Footer of the page

Expected behavior:

Header

New layout to look cleaner on larger screens
"Account" button replaced with an Avatar Icon. This is for space savings
Search bar added. This will make it easier for users to search throughout the application, especially from feed detail pages
Metrics moved to Account dropdown. As more admin features are added, this section will be expanded
Dropdown menus are now triggered on hover instead of click. Easier user discovery
Move out non critical links from the header (About us, FAQ, Contact US) to the footer

Footer

Includes just about all the links for the website
Standardized navigation pattern

Testing tips:

Simply play around with the header / footer, test the linking

Please make sure these boxes are checked before submitting your pull request - thanks!

Run the unit tests with yarn test to make sure you didn't break anything
Add or update any needed documentation to the repo
Format the title like "feat: [new feature short description]". Title must follow the Conventional Commit Specification(https://www.conventionalcommits.org/en/v1.0.0/).
Linked all relevant issues
Include screenshot(s) showing how this pull request works and fixes the issue(s)

vercel · 2026-03-30T15:28:10Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mobilitydatabase-web	Ready	Preview, Comment	Mar 30, 2026 7:02pm

Copilot

Pull request overview

Modernizes the app’s top-level navigation chrome by restructuring the Header (search + avatar-based account access + hover menus) and redesigning the Footer to centralize secondary links and standardize navigation. (custom: vercel-react-best-practices guidance applied)

Changes:

Header: adds a new search bar, updates account UI to an avatar + dropdown, and switches dropdown discovery to hover interactions.
Footer: replaces the prior minimal footer with a multi-column footer containing key site links and new i18n strings.
Removes mui-nested-menu and updates layout min-height calculations to match the new footer height.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
yarn.lock	Removes `mui-nested-menu` lock entry.
src/app/screens/Feeds/Feeds.styles.ts	Adjusts sticky header offset for md breakpoint.
src/app/constants/Navigation.ts	Removes less-critical nav links from header navigation items.
src/app/components/HeaderSearchBar.tsx	Adds new header search UI + routing to `/feeds?q=...`.
src/app/components/HeaderMobileDrawer.tsx	Adds search field and ThemeToggle to the mobile drawer.
src/app/components/Header.tsx	Major header redesign: hover menus, avatar account entry, search overlay, i18n labels.
src/app/components/Header.style.ts	Tweaks shared header button spacing.
src/app/components/FooterElements.tsx	Adds reusable footer link/title components.
src/app/components/Footer.tsx	Replaces footer with multi-column layout + social links + i18n.
src/app/[locale]/layout.tsx	Updates main container min-height calc to accommodate new footer size.
src/app/App.css	Updates client-side min-height calc to accommodate new footer size.
package.json	Removes `mui-nested-menu` dependency.
messages/fr.json	Adds new `common.` keys and new `footer.` namespace.
messages/en.json	Adds new `common.` keys and new `footer.` namespace.

src/app/components/HeaderSearchBar.tsx

src/app/components/FooterElements.tsx

src/app/components/Footer.tsx

Copilot · 2026-03-30T15:32:45Z

src/app/components/Header.tsx

+                  onClick={() => {
+                    handleNavigation(navigationAccountItem);
+                  }}


The account avatar button advertises a menu via aria-controls/aria-haspopup, but its onClick navigates to the account page and the menu only opens on hover. This prevents keyboard/touch users from accessing Sign Out / Metrics items. Suggest making click open the menu (and provide a distinct menu item for Account Details), and add focus/keyboard support to match the ARIA semantics.

Suggested change

onClick={() => {

handleNavigation(navigationAccountItem);

}}

onClick={handleAccountOpen}

src/app/components/Header.tsx

src/app/components/Footer.tsx

Copilot · 2026-03-30T15:32:46Z

src/app/components/Header.tsx

+              <Box
+                component='span'
+                onMouseEnter={handleValidatorOpen}
+                onMouseLeave={handleValidatorClose}
+                sx={{ display: 'inline-flex' }}
+              >
                <Button
                  aria-controls='validator-menu'
                  aria-haspopup='true'
+                  aria-expanded={validatorAnchorEl !== null}
                  endIcon={<ArrowDropDownIcon />}


The validators dropdown is now only triggered via onMouseEnter/onMouseLeave on the wrapper and the button has no click/focus handler. This makes the menu inaccessible for keyboard users and unreliable on touch devices (no hover). Consider keeping hover behavior, but also open the menu on click (and/or onFocus/onKeyDown for Enter/Space) so the dropdown is operable without a mouse.

src/app/components/Header.tsx

github-actions · 2026-03-30T19:01:01Z

*Lighthouse ran on https://mobilitydatabase-f89m28zyp-mobility-data.vercel.app/ * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟢 99	🟢 94	🟢 100	🟢 100

*Lighthouse ran on https://mobilitydatabase-f89m28zyp-mobility-data.vercel.app/feeds * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟢 91	🟠 87	🟢 96	🟢 100

*Lighthouse ran on https://mobilitydatabase-f89m28zyp-mobility-data.vercel.app/feeds/gtfs/mdb-2126 * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟠 53	🟢 94	🟢 96	🟢 100

*Lighthouse ran on https://mobilitydatabase-f89m28zyp-mobility-data.vercel.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟢 99	🟠 84	🟢 100	🟢 100

*Lighthouse ran on https://mobilitydatabase-f89m28zyp-mobility-data.vercel.app/feeds/gbfs/gbfs-flamingo_porirua * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟠 89	🟢 94	🟢 96	🟢 100

davidgamez · 2026-03-30T19:11:19Z

src/app/components/Footer.tsx

+              <FooterLink href='/gbfs-validator'>
+                {t('links.gbfsValidator')}{' '}
+              </FooterLink>


This must be hidden behind the feature flag or pointing to the current GBFS validator.

davidgamez · 2026-03-30T19:17:19Z

src/app/components/Header.tsx

@@ -264,186 +312,212 @@ export default function DrawerAppBar(): React.ReactElement {
              </Link>
            ))}
            {config.gbfsValidator && (


This feature flag should be applied only to the GBFS validator, not to all validators' links.

this is the same logic we have in the Header, do we want to start exposing it in both? Should we even allow the gbfs validator link to start with the external link?

As the new GBFS UI validator is not there yet, let's expose the current GBFS validator and the others. This can be done in a different issue, as it's not part of the current scope.

Alessandro100 added 5 commits March 30, 2026 11:09

update footer

746f957

header updated

9bb7863

layout adjustments

b2a57c8

translation keys

6333c70

package cleanup

ebc1ecf

Alessandro100 requested a review from Copilot March 30, 2026 15:27

Alessandro100 self-assigned this Mar 30, 2026

Copilot started reviewing on behalf of Alessandro100 March 30, 2026 15:28 View session

Copilot AI reviewed Mar 30, 2026

View reviewed changes

e2e test fix

336d211

vercel bot deployed to Preview March 30, 2026 18:32 View deployment

e2e fix

0a645dc

vercel bot deployed to Preview March 30, 2026 18:45 View deployment

copilot pr comments

a7ce54e

vercel bot deployed to Preview March 30, 2026 18:53 View deployment

footer hide the validators

fd5054e

vercel bot deployed to Preview March 30, 2026 19:02 View deployment

davidgamez requested changes Mar 30, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: modernize header and footer#92

feat: modernize header and footer#92
Alessandro100 wants to merge 9 commits intomainfrom
feat/90-modernize-header-footer

Alessandro100 commented Mar 30, 2026

Uh oh!

vercel bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

davidgamez Mar 30, 2026

Uh oh!

davidgamez Mar 30, 2026

Uh oh!

Alessandro100 Mar 30, 2026

Uh oh!

davidgamez Mar 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Alessandro100 commented Mar 30, 2026

Uh oh!

vercel bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davidgamez Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

davidgamez Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Alessandro100 Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

davidgamez Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Mar 30, 2026 •

edited

Loading

github-actions bot commented Mar 30, 2026 •

edited

Loading