Lb/update languages menu ux behind flag by lilybarrett · Pull Request #3335 · mbta/dotcom

lilybarrett · 2026-07-13T18:17:03Z

Scope

We want to redesign the header with a two-tier menu that, among other things, reimagines what the Languages button/menu looks like. This adds that redesign behind the feature flag that also enables Smartling translations .

Asana Ticket:
https://app.asana.com/1/15492006741476/project/1213994587940653/task/1216081563934501?focus=true

Implementation

Please note that this adds some changes to the Typescript code that handles interactions w/ the headers/menus on Dotcom -- namely to allow Dotcom to handle multiple tiers of headers rather than just one.
Additional CSS classes and design updates behind the feature flag -- You may notice some code duplication here.
Some minor code refactors

Screenshots

How to test

Pull down this branch or navigate to the deployment branch
Ensure nothing in the header UX/functionality looks broken (BEFORE turning on the feature flag)
Navigate to /_flags and turn on the feature flag
Interact with the new two-tiered header -- ensuring that buttons/links on both menu tiers still work as expected, changing the screen size, etc.
Turn on Voiceover and tab around, ensuring that the Languages button adheres to accessibility expectations. (It should behave similarly to the existing buttons on the menu).

Note: Changes to the footer will come in future work, once designs are complete.

lilybarrett · 2026-07-15T14:49:30Z

  }
 }

+nav.m-top-tier-menu--mobile {


Tried to follow naming conventions with the new styling classes I added, but I'm sure I'm missing context/it's possible I'm not using them correctly. Please let me know!

In the Rider Design System, we refer to this as the "MBTA.com Header" (catchy, I know) and the second tier as the "MBTA.com Navbar" component.

lilybarrett · 2026-07-15T14:49:46Z

  }
 }

+.top-tier-nav-container {


Tried to follow naming conventions with the new styling classes I added, but I'm sure I'm missing context/it's possible I'm not using them correctly. Please let me know!

lilybarrett · 2026-07-15T20:08:53Z


-  const header: HTMLElement = rootElement.querySelector("header")!;
-  if (!header) return;
+  // SUPPORT MULTIPLE HEADERS


I know there's been some performance improvement work recently -- this code for handling/looping through multiple headers could benefit from additional eyes on it!

Style new header properly

Minor cleanup WIP mobile UX WIP fix up issues with menu open/close Tweak styling Fix a class mistake Update .po files WIP refactors Quiet the TS errors WIP WIP Move languages menu closer to button on mobile Styling tweaks More styling tweaks Move classe to right file WIP clean up styles Some cleanup Add TODO Remove commented-out code

Manually resolve merge conflict Remove unnecessary comments Only make necessary changes Bring code back in that got deleted by accident Restore previous behaviors More styling tweaks

WIP

thecristen

Thank you for this addition and light refactor - you're a great pattern-matcher!

In addition to the suggestions here, I noticed that the top tier nav completely disappears when you're between certain desktop and mobile breakpoints 😅 (shrink the page width and you'll see!).

thecristen · 2026-07-17T17:50:56Z

+  height: $header-navbar-height-new;
+
+  @include media-breakpoint-only(xs) {
+    height: $header-navbar-height-xs;
+  }


suggestion: to better match the design, let's remove the defined height here and add vertical padding! Here's the CSS variable we have which corresponds to the --spacing-small variable used in Figma

Suggested change

height: $header-navbar-height-new;

@include media-breakpoint-only(xs) {

height: $header-navbar-height-xs;

}

padding: var(--spacing-sm);

(and both mobile and desktop designs happen to use the same padding)

thecristen · 2026-07-17T17:58:07Z

@@ -0,0 +1,47 @@
+<header class="top-tier-header new">
+  <div class="container top-tier-nav-container">
+    <nav id="languages-menu" class="top-tier-header-navbar new m-menu--desktop">


(desktop only) It looks like there's some extra padding on the right of the language menu that is making it misaligned with the search bar below it.

thecristen · 2026-07-17T18:00:05Z

@@ -0,0 +1,46 @@
+<header class="top-tier-header new top-tier-nav">
+  <div class="container top-tier-nav-container new">
+    <nav id="languages-menu" class="top-tier-header-navbar new m-top-tier-menu--mobile">


(mobile only)

question: Is darkening the bottom navbar when the top nav menu is expanded expected here?

That's a good question...I'll follow up with Chase!

thecristen · 2026-07-17T18:22:31Z

+
+.top-tier-header {
+  .navbar-logo,
+  .navbar-logo:hover,
+  .navbar-logo:focus {
+    color: $white;
+    text-decoration: none;
+  }
+
+  .c-svg__mbta-logo,
+  .c-svg__mbta-name-and-logo {
+    path,
+    text {
+      fill: $white;
+    }
+  }
+
+  background-color: $brand-primary-darkest;
+  color: $white;
+}
+
+


I'm not sure this section is needed, because I think the existing CSS will achieve the same as-is?

@thecristen There are subtle differences: the logos need to be white, and the background color needs to be darker! I agree there's a lot of repetition here, though. Thoughts on a better way to handle it?

thecristen · 2026-07-17T19:10:05Z

+      <%= if not Laboratory.enabled?(@conn, :use_smartling_translations) do %>
+        <button
+          class="header-search__toggle"
+          data-nav="toggle-nav-search"
+          type="button"
+          aria-expanded="false"
+          aria-controls="search-header-mobile__container"
+          aria-label={~t(Search MBTA.com)}
+        >
+          <i class="fa fa-fw fa-search" aria-hidden="true"></i>
+          <i class="fa fa-fw fa-close" aria-hidden="true"></i>
+        </button>
+      <% else %>
+        <div class="header-search__toggle__container">
+          <button
+            class="header-search__toggle header-search__toggle_with_top_tier_nav"
+            data-nav="toggle-nav-search"
+            type="button"
+            aria-expanded="false"
+            aria-controls="search-header-mobile__container"
+            aria-label={~t(Search MBTA.com)}
+          >
+            <i class="fa fa-fw fa-search" aria-hidden="true"></i>
+            <i class="fa fa-fw fa-close" aria-hidden="true"></i>
+          </button>
+        </div>
+      <% end %>


I'm a bit confused why this diff is needed! Could you explain what's happening here?

It's a very subtle difference in styling (with the addition of the new classes) that moves the logo in the original header. In the original header, on mobile, the logo is between the menu and the search bar. In the new design, the logo is always left-aligned.

I'm definitely not saying this is the best way to implement that, though -- especially being an Elixir newbie. Let me know your thoughts!

thecristen · 2026-07-17T19:12:53Z

    </a>

-    <div class="m-menu--desktop__menu">
+    <div class={"#{if Laboratory.enabled?(@conn, :use_smartling_translations), do: "m-menu--multiple_tiered_desktop__menu", else: "m-menu--desktop__menu"}"}>


I think you might be able to get away without toggling the CSS class here (and I don't think you need the .m-menu--multiple_tiered_desktop__menu class either)

The only important difference included in the new class is this:

top: $header-navbar-height-new * 2;

I'll try to find a better way to account for that without changing the original class!

thecristen · 2026-07-17T19:24:05Z

@@ -0,0 +1,46 @@
+<header class="top-tier-header new top-tier-nav">


question: Why have a separate template for the mobile version of the top tier nav? There's almost no designed content difference between the desktop/mobile designs, only the MBTA logo change that could be handled in CSS. I think you don't need this file (and the associated CSS duplicated for it).

There are some different classes applied in either case -- but I'm still getting familiar with Elixir templates, so I imagine there's a better way to handle even that. Any suggestions?

lilybarrett force-pushed the lb/update-languages-menu-UX-behind-flag branch 4 times, most recently from 0b1dc58 to a743b3c Compare July 15, 2026 14:46

lilybarrett commented Jul 15, 2026

View reviewed changes

lilybarrett force-pushed the lb/update-languages-menu-UX-behind-flag branch 3 times, most recently from dba6265 to f9ceaec Compare July 15, 2026 20:07

lilybarrett commented Jul 15, 2026

View reviewed changes

lilybarrett marked this pull request as ready for review July 15, 2026 20:27

lilybarrett requested a review from a team as a code owner July 15, 2026 20:27

lilybarrett requested a review from joshlarson July 15, 2026 20:27

smartling-github-connector Bot added the Not Ready for Translation Remove this when the PR is approved to trigger a Smartling translation job label Jul 15, 2026

lilybarrett requested a review from thecristen July 15, 2026 20:27

thecristen added the dev-blue Deploy to dev-blue label Jul 16, 2026

thecristen temporarily deployed to dev-blue July 16, 2026 16:36 — with GitHub Actions Inactive

Lily Barrett added 6 commits July 16, 2026 16:25

WIP

b7d1e8b

Style new header properly

Properly put changes behind feature flag

46046b1

Toggle class based on flag

df521ff

Manually resolve merge conflict Remove unnecessary comments Only make necessary changes Bring code back in that got deleted by accident Restore previous behaviors More styling tweaks

More styling tweaks

fcfcb43

WIP

Make the TS diff changes easier to grok

f982f18

lilybarrett force-pushed the lb/update-languages-menu-UX-behind-flag branch from f9ceaec to f982f18 Compare July 16, 2026 20:25

lilybarrett temporarily deployed to dev-blue July 16, 2026 20:25 — with GitHub Actions Inactive

thecristen temporarily deployed to dev-blue July 17, 2026 14:53 — with GitHub Actions Inactive

thecristen requested changes Jul 17, 2026

View reviewed changes

Fix up issue with top tier menu not appearing at all screen sizes

b6dd2a0

lilybarrett had a problem deploying to dev-blue July 17, 2026 20:38 — with GitHub Actions Error

Bit of styling cleanup

9f3e6aa

lilybarrett deployed to dev-blue July 17, 2026 20:45 — with GitHub Actions View deployment

		@@ -0,0 +1,46 @@
		<header class="top-tier-header new top-tier-nav">

Uh oh!

Conversation

lilybarrett commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Scope

Implementation

Screenshots

How to test

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thecristen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lilybarrett commented Jul 13, 2026 •

edited

Loading