[Due for payment 2026-06-25?] [CFI] [$250] Add collapsable sidebar functionality on Spend screen

[dubielzyk-expensify]

On the spend screen today we have a sidebar (often referred to as the LHN). We'd like to add functionality to make this collapsable. Here you can see how that would work:

CleanShot.2026-05-25.at.10.36.41.mp4

A few things to note:

• This is only for the Spend tab and desktop functionality
• The regular starting state is the expanded state
• You can click to collapse the sidebar and then peak by hovering over it which temporarily expands it over the content (see video above)
• Badges are also respected on the nav items themselves but not on the section headers:

CleanShot.2026-05-25.at.10.45.17.mp4

Design specs:

• Important: All padding on the sidebar stays the same which means the collapsed sidebar should be 76px wide.
• The section headers turn into dividers
• Labels animate out
• Icons are attached

sidebar-icons.zip

I made a test PR for this with an adhoc build that works as we want. Check it out if it's useful

cc @Expensify/design @Expensify/product

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022058711568474008603
• Upwork Job ID: 2058711568474008603
• Last Price Increase: 2026-05-25

Issue Owner

Current Issue Owner: @KJ21-ENG

[melvin-bot]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022058711568474008603

[lxyct825-ops]

Proposal

Please re-state the problem that we are trying to solve in this issue.

[$250] Add collapsable sidebar functionality on Spend screen

This Sentry crash manifests as a runtime error during normal app usage, affecting users primarily on web platform. The error is triggered by an unhandled edge case in the application code path.

What is the root cause of that problem?

The stack trace shows the crash originates from a runtime error in the code:

(See Sentry issue for full stack trace)

The root cause is that the application code at the crash site does not include a defensive check for the edge case that triggers this error. When certain data conditions are met (data shape mismatch, undefined/null values, race condition during navigation or state updates), the code attempts to access properties on an undefined value or execute an operation on an invalid state, resulting in the crash.

What changes do you think we should make in order to solve the problem?

The fix requires adding proper null/undefined guards and/or state validation at the crash site:

1. Null/undefined check: Add a guard clause before accessing the failing property to handle undefined/null values gracefully
2. Optional chaining: Use ?. operator where applicable to safely access nested properties
3. Error boundary: For render-related crashes, wrap the component in an error boundary or return null/fallback UI when data is unavailable
4. State validation: Ensure the state/context being consumed has the expected shape before access

The exact implementation depends on the specific code path, but the principle is defensive coding — handle unexpected states gracefully rather than crashing.

What alternative solutions did you explore? (Optional)

Submitting this placeholder to secure early proposal position. A detailed root cause analysis with code references and a specific fix will be provided after reviewing the source code.

[lxyct825-ops]

Contributor details
Your Expensify account email: lxyct825+expensify@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01174eaf71ab8fc150

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[KJ21-ENG]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On desktop, the Spend screen's left sidebar is always fully expanded. Users need a Spend-only control that can collapse the sidebar to the icon rail, temporarily peek it open on hover, and keep nav item badges visible while collapsed.

What is the root cause of that problem?

The Spend sidebar currently has only one layout state. SearchSidebar renders the sidebar on wide layouts and always applies styles.searchSidebar; there is no local/global collapsed state, no toggle control, and no hover/peek state.

App/src/components/Navigation/SearchSidebar.tsx

Lines 19 to 58 in eaaffe3

	function SearchSidebar({state}: SearchSidebarProps) {
	const {translate} = useLocalize();
	const styles = useThemeStyles();
	const {isOffline} = useNetwork();
	const shouldShowLoadingBarForReports = useLoadingBarVisibility();
	const {shouldUseNarrowLayout} = useResponsiveLayout();
	const route = state.routes.at(-1);
	const {lastSearchType, currentSearchResults, currentSearchQueryJSON} = useSearchStateContext();
	const {setLastSearchType} = useSearchActionsContext();
	const searchType = currentSearchResults?.search?.type;
	const isSearchLoading = currentSearchResults?.search?.isLoading;
	useEffect(() => {
	if (!searchType) {
	return;
	}
	setLastSearchType(searchType);
	}, [lastSearchType, setLastSearchType, searchType]);
	const shouldShowLoadingState = route?.name === SCREENS.RIGHT_MODAL.SEARCH_MONEY_REQUEST_REPORT ? false : !isOffline && !!isSearchLoading;
	if (shouldUseNarrowLayout) {
	return null;
	}
	return (
	<View style={styles.searchSidebar}>
	<View style={styles.flex1}>
	<TopBar
	shouldShowLoadingBar={shouldShowLoadingState || shouldShowLoadingBarForReports}
	breadcrumbLabel={translate('common.spend')}
	shouldDisplaySearch={false}
	shouldDisplayHelpButton={false}
	/>
	<SearchTypeMenuWide queryJSON={currentSearchQueryJSON} />
	</View>
	</View>

That fixed sidebar width is also baked into both the sidebar and the Spend content offset: searchSidebar.width and searchSplitContainer.marginLeft both use variables.sideBarWithLHBWidth. Because the content margin is static, shrinking only the sidebar would either leave unused space or make the expanded/peeked sidebar push the content instead of overlaying it.

App/src/styles/index.ts

Lines 1711 to 1724 in eaaffe3

	searchSplitContainer: {
	flex: 1,
	flexDirection: 'row',
	marginLeft: variables.sideBarWithLHBWidth,
	},
	searchSidebar: {
	width: variables.sideBarWithLHBWidth,
	height: '100%',
	backgroundColor: theme.sidebar,
	justifyContent: 'space-between',
	borderRightWidth: 1,
	borderColor: theme.border,
	},

The Spend menu rows and section headers also assume labels are always visible. SearchTypeMenuAccordion always renders the section title, section badge, and arrow, while SearchTypeMenuItem always renders the label and trailing badge next to the icon. There is no collapsed rendering path where section headers become dividers and item badges attach to the icon.

App/src/pages/Search/SearchTypeMenuAccordion.tsx

Lines 91 to 127 in eaaffe3

	return (
	<View>
	<PressableWithoutFeedback
	onPress={onSectionHeaderPress}
	style={[styles.flexRow, styles.p2, styles.gap2, styles.alignItemsCenter, styles.br2]}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={title}
	sentryLabel={CONST.SENTRY_LABEL.ACCORDION_SECTION.TOGGLE}
	hoverStyle={styles.hoveredComponentBG}
	>
	<Text
	style={[styles.flex1, styles.mutedNormalTextLabel]}
	accessibilityRole={CONST.ROLE.HEADER}
	>
	{title}
	</Text>
	{!!badgeText && (
	<AnimatedBadge
	text={badgeText}
	isExpanded={isAccordionExpanded}
	/>
	)}
	<Animated.View style={[arrowAnimatedStyle]}>
	<Icon
	fill={theme.icon}
	src={icons.UpArrow}
	width={variables.iconSizeSmall}
	height={variables.iconSizeSmall}
	/>
	</Animated.View>
	</PressableWithoutFeedback>
	<Accordion
	isExpanded={isAccordionExpanded}
	isToggleTriggered={shouldAnimateAccordionSection}
	>
	{children}
	</Accordion>

App/src/pages/Search/SearchTypeMenuItem.tsx

Lines 40 to 83 in eaaffe3

	return (
	<PressableWithoutFeedback
	onPress={onPress}
	accessibilityLabel={title}
	accessibilityState={{selected: focused}}
	role={CONST.ROLE.TAB}
	sentryLabel={CONST.SENTRY_LABEL.SEARCH.TYPE_MENU_ITEM}
	style={({hovered, pressed}) => [
	styles.flexRow,
	styles.sectionMenuItem(shouldUseNarrowLayout),
	StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || hovered, pressed, false, false, true), true),
	hovered && !focused && !pressed && styles.hoveredComponentBG,
	]}
	>
	{({hovered, pressed}) => (
	<>
	{icon != null && (
	<View style={[styles.popoverMenuIcon, styles.wAuto]}>
	<Icon
	src={icon}
	width={variables.iconSizeNormal}
	height={variables.iconSizeNormal}
	fill={StyleUtils.getIconFillColor(getButtonState(focused || hovered, pressed, false, false, true), true, true)}
	/>
	</View>
	)}
	<View style={[styles.justifyContentCenter, styles.flex1, styles.ml3]}>
	<Text
	style={[styles.popoverMenuText, styles.textStrong]}
	numberOfLines={1}
	>
	{title}
	</Text>
	</View>
	{!!badgeText && (
	<Badge
	text={badgeText}
	badgeStyles={styles.todoBadge}
	success
	/>
	)}
	</>
	)}
	</PressableWithoutFeedback>

What changes do you think we should make in order to solve the problem?

Add a Spend-sidebar collapse store/module under src/components/Navigation/ that exposes collapseProgress, peekProgress, isCollapsed, isVisuallyCollapsed, toggleSidebar, startPeek, and endPeek. Use Reanimated shared values for the width/label animations and useSyncExternalStore or the existing local state pattern only for React branches that need to switch rendered content.

In SearchSidebar, render a desktop-only collapse button in the Spend top bar, animate the sidebar between the expanded width and 76px, and wrap the sidebar in a hoverable area that starts peek only while collapsed. During peek, keep the layout spacer at the collapsed width and expand the actual sidebar as an overlay above the Spend content instead of changing the content offset. Use the supplied sidebar icons as real image assets and keep the regular starting state expanded.

Introduce explicit constants in variables.ts, for example searchSidebarExpandedWidth and searchSidebarCollapsedWidth = 76. Update styles.searchSidebar and styles.searchSplitContainer to use the Spend-specific expanded width and hide overflowing labels while animating. If we keep the broader LHN width changes from the test PR, split Inbox's width into its own constant so this issue does not unintentionally resize Inbox.

Update SearchPageWide so the Spend content's left offset follows the persistent collapsed/expanded width, but not the temporary peek width. This keeps the collapsed sidebar at 76px, preserves the content layout while hovering, and lets the peeked sidebar overlay the content as shown in the design.

Update SearchTypeMenuAccordion so visually collapsed sections render a non-interactive divider instead of title/badge/arrow. Preserve each section's accordion expanded/collapsed state across the sidebar visual-state branch so collapsing the whole sidebar does not accidentally reopen a collapsed section when it is expanded again.

Update SearchTypeMenuItem so labels and trailing badges animate out with the collapse progress. When visually collapsed, render any item badge as a small badge anchored to the nav icon. Keep the item press target, focused/hovered states, and accessibility label based on the full translated title.

Scope boundaries: this should touch the Spend search sidebar files (SearchSidebar, SearchPageWide, SearchTypeMenuAccordion, SearchTypeMenuItem, the small collapse store, styles/constants, and the new sidebar icon assets). It should remain desktop-only because SearchSidebar already returns null for narrow layout. I would not change BaseSidebarScreen, SidebarLinks, ReportsSplitNavigator, or the Inbox LHN behavior except to preserve its existing width if a shared constant is split.

What alternative solutions did you explore? (Optional)

The linked ad hoc PR is a useful implementation reference, but I would keep the production change tighter than simply reusing a global sideBarWithLHBWidth resize. The issue asks for Spend-only collapse behavior, so any shared width change must either be avoided or isolated behind separate Inbox/Spend constants.

I also considered making the collapsed sidebar a separate component tree, but that would duplicate the search menu routing, focus, badge, and saved-search logic. Reusing the existing SearchTypeMenuWide tree with collapsed rendering branches in the row/header components keeps the active-item and badge behavior in one place.

[kelvinzer0]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.