Skip to content

fix(ui): persist nav open state and honor preference at sidebar widths - #17733

Open
vikas-x7 wants to merge 1 commit into
payloadcms:mainfrom
vikas-x7:fix/nav-prefs-sidebar-widths
Open

fix(ui): persist nav open state and honor preference at sidebar widths#17733
vikas-x7 wants to merge 1 commit into
payloadcms:mainfrom
vikas-x7:fix/nav-prefs-sidebar-widths

Conversation

@vikas-x7

Copy link
Copy Markdown

What?

The admin nav was force-closed at viewports ≤1440px (l breakpoint) even though that range renders the nav as a sidebar, not a modal. The stored nav preference was only read above 1440px, and toggling the nav never wrote the preference at all (the v3 NavToggler that handled this was removed in #17212).

Fixes #17531

Why?

On any project whose desktop breakpoint is 1440px, the sidebar was never open on first load, the user's saved preference was ignored, and "remember my choice" did not exist. The unconditional close effect used the l breakpoint, but the comment/behaviour is about modal widths only.

How?

  • packages/ui/src/elements/Nav/context.tsx:
    • Read the nav preference on every sidebar width (not just >1440px). Gate changed from largeBreak === false to midBreak === false && smallBreak === false.
    • Only force-close the nav on the genuinely modal widths: midBreak === true || smallBreak === true. The l breakpoint (1440px) is no longer treated as a modal width.
  • packages/ui/src/elements/AppHeader/index.tsx:
    • The sidebar toggle now persists the preference via setPreference(PREFERENCE_KEYS.NAV, { open }, true) (same pattern the v3 NavToggler used, merge: true preserves nav-group prefs), gated to sidebar widths only so programmatic/modal closes are not persisted.

Tests

  • Added an e2e regression test in test/admin/e2e/general/e2e.spec.ts (nav — should be open by default at sidebar widths and persist the toggle preference) at 1280px: asserts nav is open by default, and that closing/reopening + reload persists.
  • Existing openNav/closeNav e2e helpers already handle both default states, so the viewport change does not break the surrounding tests.
  • ESLint: no new issues from these changes. Typecheck (tsc -p packages/ui/tsconfig.json --noEmit): 0 errors.

Previously the nav was force-closed at <=1440px (the l breakpoint) even
though that range renders the nav as a sidebar, not a modal. The stored
nav preference was only read above 1440px, and toggling the nav never
wrote the preference at all after NavToggler was removed.

Now the nav is only force-closed at the genuinely modal widths (m/s),
the preference is read on every sidebar width, and toggling persists the
preference via PREFERENCE_KEYS.NAV (merge: true) from the AppHeader
sidebar toggle.

Fixes payloadcms#17531
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Admin nav is force-collapsed at ≤1440px and does not persist user preference

1 participant