[No QA] Add a collapsing flat navigation bar by shawnborton · Pull Request #102023 · Expensify/App

shawnborton · 2026-09-23T10:51:15Z

Explanation of Change

This builds on the flat navigation bar and adds a collapsing left bar on wide layouts. It is opened as a separate pull request so that the other one keeps its own test build to compare against.

This replaces the 72px skinny left bar on web and desktop with a 220px flat navigation bar, and reworks the narrow layout's bottom bar to match.

Wide layout

Every destination is a full-width row with a horizontal icon and label. The Spend pages no longer render a second left nav — their searches move into the main nav as child rows, so there is one navigation surface instead of two.

The nav lists Home, Inbox, Expenses, Reports, Accounting, Saved, Insights (behind the insightsPage beta) and Workspaces, then an account row with your avatar and name. Reports, Accounting and Saved reveal their searches as child rows only while that group is the active destination. A collapsed group carries its children's combined count as a badge; expanding it drops that badge so the children's own counts do not double-report the same work.

At the top sit the Expensify wordmark and a small green create button that opens the global create menu.

Narrow layout

The bottom bar is Home, Inbox, Expenses, Reports and More. The Spend tab row shows only the group you are in — Reports shows its four searches, Accounting its five — and hides entirely for Expenses, which is a group of one. The page title names the group, so it holds still while you tab within it.

More opens a page of navigation rows: Accounting, Saved, Insights and Workspaces. Each row returns you to where you last were inside that destination rather than to its first page, and each of those pages gets a back arrow to the More list. Tapping More while you are inside one of its destinations climbs back to the list.

Collapsing the bar

A toggle in the bar's header narrows it from 220px to a 60px icon rail, and the central pane follows. Every row keeps its normal padding while collapsed, so the icons stay on the same column and none of them move as the bar animates; the labels, badges, group children and hover menus simply go away.

Hovering a collapsed bar peeks it back open over the content rather than pushing the page around, and moving the pointer away closes it again.

The collapsed state reuses the store the Spend sidebar already had, SearchSidebarCollapseStore. That sidebar is the surface this navigation replaced, so sharing one persisted flag and one peek state avoids two that can disagree. The flat navigation bar adds its own width hooks alongside the existing ones.

Three places assumed the bar was a fixed 220px and now read its live width: the navigator's own container, which is what slides the central pane; DebugTabView's absolute positioning; and SearchRowSkeleton, which right-aligns against the left pane.

Shared changes

Selected and hover backgrounds are shared across navigation surfaces as navigationRowSelected (product-300) and navigationRowHovered (product-200). They apply to the flat nav, the Inbox LHN, and the Workspace, Domain and Account editor menus. The editor menus opt in through a new shouldUseNavigationRowColors prop on MenuItem, so popover and context menus that also use focused keep their current colors.
Horizontal tabs use product-300 for the selected tab, and can opt into hugging their content instead of stretching.
Sidebar widths are per-navigator: 360px for the Inbox, 260px for Spend, Workspace, Domain and Account. getSplitNavigatorSidebarWidth resolves the width from the navigator's sidebar route so the sidebar and the central pane offset always agree.
On web the Copilot Switch button moves into the Account page header, which leaves the full sidebar width for the user name.
Wide-layout navigation rows are 40px tall and share one horizontal padding constant, so their labels line up.

Two fixes that reach beyond the new navigation

WORKSPACES_TAB_SET did not list SCREENS.DOMAINS_LIST, so the Workspaces tab could not restore onto its Domains tab and always fell back to Workspaces. This is reproducible on main today: open Workspaces, switch to Domains, leave the tab, and come back.
SearchRowSkeleton positioned its trailing elements against a left pane that included the Spend sidebar this PR removes, leaving a gap on the right of every skeleton row.

Fixed Issues

$
PROPOSAL:

Tests

Wide layout

Open the app on web in a window at least 1400px wide.
Verify the left nav is 200px wide and lists Home, Inbox, Expenses, Reports, Accounting, Workspaces and an account row.
Click Reports. Verify it opens All reports and reveals All reports, Drafts, Needs approval and Ready to pay beneath it.
Verify the child rows have no icons, use the smaller label size, and that only the active child is bold.
Click Accounting. Verify the Reports children collapse and the Accounting children appear.
Navigate away from a group. Verify its row shows a single badge totalling its children's counts, and that the badge disappears once the group is expanded.
Save a search. Verify a Saved row appears and lists that search as a child.
Hover any top-level row. Verify the label turns the standard text color and the icon turns green.
Verify the account row shows your avatar and name, and that selecting it draws a green ring around the avatar without changing the row height.
Open a Spend page. Verify there is no second left nav beside the main one.
Open Settings, a workspace, and a domain. Verify each sidebar is 260px and the Inbox sidebar is 360px, with no gap or overlap against the central pane.

Narrow layout

Narrow the window below the wide-layout breakpoint, or open the app on a phone.
Verify the bottom bar is Home, Inbox, Expenses, Reports and More.
Open Expenses. Verify there is no tab row above the table and no empty gap where it would have been.
Open Reports. Verify the tab row shows only All reports, Drafts, Needs approval and Ready to pay, and that the page title stays "Reports" as you switch tabs.
Tap More. Verify a page titled "More" listing Accounting, Saved, Insights and Workspaces.
Tap Accounting, switch to Card statements, then tap Home and tap More again. Verify you land back on Card statements, not on the More list.
Tap More again while on Card statements. Verify you return to the More list.
Verify Accounting, Saved, Insights and Workspaces each show a back arrow that returns to the More list.
From More, open Workspaces, switch to the Domains tab, go to Home, then tap More. Verify you return to the Domains tab.
Verify the account avatar appears in the top right and opens Account.

Collapsing the bar

On a wide window, click the toggle at the top right of the left navigation bar. Verify the bar narrows to an icon rail and the page content moves left with it.
Verify each row's icon stays on the same column through the animation, rather than sliding to a new position.
Verify labels, badges, group children and the saved search overflow menus are gone while collapsed, and the create button is a green square.
Hover the collapsed bar. Verify it widens back out over the content without moving the page, and closes again when you move away.
Click the toggle again. Verify the bar returns to 220px and every label comes back.
Reload the page. Verify the bar is still collapsed.
Collapse the bar and open a Spend page while its results are loading. Verify the loading skeleton's trailing elements stay against the right edge.

Failure and edge scenarios

Sign in with an account that has no saved searches. Verify no Saved row appears in the wide nav or on the More page.
Sign in without the insightsPage beta. Verify no Insights row appears in either place, and that Account is still reachable from the top right.
Delete the saved search you last opened from More, then tap More. Verify it falls back to the More page instead of failing.
Reload the page and tap More. Verify it opens the More list, since the remembered destination is session-scoped.

Verify that no errors appear in the JS console

Offline tests

Load the app online, then turn off your network connection.
Verify the left nav still renders every row, including group children and the account row.
Click between Reports, Accounting and Workspaces. Verify navigation still works and the selected row updates.
On a narrow window, tap More and open each destination. Verify navigation works and the back arrows return to the list.
Verify the offline indicator appears and the nav does not shift or collapse.

QA Steps

Same as tests.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

… to the top bar Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

# Conflicts: # src/components/AccountSwitcher.tsx # src/pages/Search/SearchPageWide.tsx # src/pages/inbox/sidebar/InboxTabSelector.tsx # src/pages/inbox/sidebar/ProfileAvatarWithIndicator.tsx

…e Spend tabs Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

…ation Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

…n rows Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

# Conflicts: # src/styles/variables.ts

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

…youts Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

…dius Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

…hift

github-actions · 2026-09-23T10:51:59Z