fix(Enhanced navigation): Change breakpoint for collapsing sidebar #37350

dougfabris · 2025-10-30T21:22:42Z

Proposed changes (including videos or screenshots)

Important

This change is under feature preview

before

after

Issue(s)

Steps to test or reproduce

Further comments

CORE-1515

Summary by CodeRabbit

Bug Fixes
- Fixed the sidebar collapse breakpoint in enhanced navigation for improved responsive behavior across device sizes.

dionisio-bot · 2025-10-30T21:22:45Z

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

changeset-bot · 2025-10-30T21:22:46Z

🦋 Changeset detected

Latest commit: e69d16d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 41 packages

Name	Type
@rocket.chat/ui-contexts	Patch
@rocket.chat/meteor	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/livechat	Patch
@rocket.chat/mock-providers	Patch
@rocket.chat/ui-avatar	Patch
@rocket.chat/ui-client	Patch
@rocket.chat/ui-video-conf	Patch
@rocket.chat/ui-voip	Patch
@rocket.chat/web-ui-registration	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/rest-typings	Patch
@rocket.chat/api-client	Patch
@rocket.chat/apps	Patch
@rocket.chat/core-services	Patch
@rocket.chat/cron	Patch
@rocket.chat/ddp-client	Patch
@rocket.chat/freeswitch	Patch
@rocket.chat/http-router	Patch
@rocket.chat/model-typings	Patch
@rocket.chat/account-service	Patch
@rocket.chat/authorization-service	Patch
@rocket.chat/ddp-streamer	Patch
@rocket.chat/omnichannel-transcript	Patch
@rocket.chat/presence-service	Patch
@rocket.chat/queue-worker	Patch
@rocket.chat/stream-hub-service	Patch
@rocket.chat/federation-matrix	Patch
@rocket.chat/license	Patch
@rocket.chat/media-calls	Patch
@rocket.chat/omnichannel-services	Patch
@rocket.chat/pdf-worker	Patch
@rocket.chat/presence	Patch
rocketchat-services	Patch
@rocket.chat/models	Patch
@rocket.chat/network-broker	Patch
@rocket.chat/omni-core-ee	Patch
@rocket.chat/instance-status	Patch
@rocket.chat/omni-core	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2025-10-30T21:23:09Z

Walkthrough

This PR refactors sidebar toggle logic from device-size flags (isTablet, isMobile) to a centralized shouldToggle property. It replaces the newNavigation feature flag with secondSidebar in the LayoutProvider, exposes the new shouldToggle boolean in LayoutContext, and updates six components and tests to use the new toggle condition for consistent sidebar collapse behavior.

Changes

Cohort / File(s)	Change Summary
Layout Context & Type Definitions `packages/ui-contexts/src/LayoutContext.ts`, `apps/meteor/client/providers/LayoutProvider.tsx`	Added `shouldToggle: boolean` property to `LayoutContext.sidebar`. Replaced `newNavigation` feature flag with `secondSidebar`. Updated toggle logic to depend on `secondSidebarEnabled` instead of `enhancedNavigationEnabled`. Wired `shouldToggle` through context and adjusted sidebar width calculation.
Component Implementations `apps/meteor/client/NavBarV2/NavBarPagesSection.tsx`, `apps/meteor/client/components/Page/PageHeaderNoShadow.tsx`, `apps/meteor/client/sidebarv2/SidebarRegion.tsx`	Migrated visibility and state conditions from `isTablet`/`isMobile` flags to `sidebar.shouldToggle`. Updated className and overlay button rendering to depend on `shouldToggle` for consistency.
Tests & Documentation `apps/meteor/tests/e2e/feature-preview.spec.ts`, `.changeset/hot-cups-smash.md`	Updated test descriptions and assertions for tablet/mobile viewports to match new toggle behavior. Added changeset documenting patch bumps with fix description.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Areas requiring attention:
- LayoutProvider.tsx: Verify that secondSidebarEnabled feature flag logic correctly replaces enhancedNavigationEnabled and that shouldToggle is properly propagated
- Cross-component consistency: Ensure all usages of sidebar.shouldToggle align with the intended toggle behavior across NavBar, PageHeader, and SidebarRegion
- feature-preview.spec.ts: Confirm test assertions accurately reflect the new mobile vs. tablet toggle behavior

Suggested labels

stat: ready to merge, stat: QA assured

Suggested reviewers

MartinSchoeler

Poem

🐰 The sidebar now toggles with wisdom so grand,
No more checking tablets across all the land!
A shouldToggle flag guides the collapse and expand,
While secondSidebar features work hand in hand. ✨

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title clearly and concisely summarizes the main change: modifying the sidebar collapse breakpoint in the enhanced navigation feature. The title is specific, relates directly to the primary objective evident from the changeset (replacing device-size flags with a sidebar toggle flag), and uses clear terminology without vague language or noise.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/enhanced-nav-breakpoint

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2025-10-30T21:34:32Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 67.89%. Comparing base (9a18288) to head (e69d16d).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #37350      +/-   ##
===========================================
+ Coverage    66.88%   67.89%   +1.00%     
===========================================
  Files         3411     3357      -54     
  Lines       117029   114902    -2127     
  Branches     21490    20755     -735     
===========================================
- Hits         78274    78008     -266     
+ Misses       36071    34210    -1861     
  Partials      2684     2684

Flag	Coverage Δ
e2e	`57.46% <100.00%> (+<0.01%)`	⬆️
unit	`71.93% <0.00%> (-0.07%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/meteor/client/providers/LayoutProvider.tsx (1)

40-41: Auto-collapse behavior on breakpoint changes.

The useEffect automatically syncs isCollapsed with shouldToggle whenever the breakpoint changes. This means the sidebar will automatically collapse/expand when users resize their browser window across breakpoints.

While this may be the intended behavior, consider if users who manually expanded the sidebar on a small screen would expect it to remain open even after the effect triggers.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 65fbcbe and f56671b.

📒 Files selected for processing (7)

.changeset/hot-cups-smash.md (1 hunks)
apps/meteor/client/NavBarV2/NavBarPagesSection.tsx (1 hunks)
apps/meteor/client/components/Page/PageHeaderNoShadow.tsx (2 hunks)
apps/meteor/client/providers/LayoutProvider.tsx (3 hunks)
apps/meteor/client/sidebarv2/SidebarRegion.tsx (2 hunks)
apps/meteor/tests/e2e/feature-preview.spec.ts (1 hunks)
packages/ui-contexts/src/LayoutContext.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

apps/meteor/tests/e2e/**/*.spec.ts

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

apps/meteor/tests/e2e/**/*.spec.ts: All Playwright test files must be located under apps/meteor/tests/e2e/ and use the .spec.ts extension (e.g., login.spec.ts)
Use descriptive test names that clearly communicate expected behavior
Use test.beforeAll() and test.afterAll() for setup and teardown
Use test.step() to organize complex test scenarios
Group related tests in the same file
Utilize Playwright fixtures (test, page, expect) consistently
Prefer web-first assertions (e.g., toBeVisible, toHaveText)
Use expect matchers (toEqual, toContain, toBeTruthy, toHaveLength, etc.) instead of assert statements
Maintain test isolation between test cases
Ensure a clean state for each test execution
Ensure tests run reliably in parallel without shared state conflicts

Files:

apps/meteor/tests/e2e/feature-preview.spec.ts

apps/meteor/tests/e2e/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

apps/meteor/tests/e2e/**/*.{ts,tsx,js,jsx}: Write concise, technical TypeScript/JavaScript with accurate typing
Follow DRY by extracting reusable logic into helper functions or page objects
Avoid code comments in the implementation

Files:

apps/meteor/tests/e2e/feature-preview.spec.ts

apps/meteor/tests/e2e/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

apps/meteor/tests/e2e/**/*.{ts,tsx}: Avoid using page.locator(); prefer semantic locators like page.getByRole, page.getByLabel, page.getByText, and page.getByTitle
Store commonly used locators in variables/constants for reuse
Use page.waitFor() with specific conditions and avoid hardcoded timeouts
Implement proper wait strategies for dynamic content
Follow the Page Object Model pattern consistently

Files:

apps/meteor/tests/e2e/feature-preview.spec.ts

🧠 Learnings (10)