Skip to content

feat(side-menu): animate nested sidebar expand/collapse#2779

Open
illionillion wants to merge 1 commit intoRedocly:mainfrom
illionillion:feat/sidebar-accordion-animation
Open

feat(side-menu): animate nested sidebar expand/collapse#2779
illionillion wants to merge 1 commit intoRedocly:mainfrom
illionillion:feat/sidebar-accordion-animation

Conversation

@illionillion
Copy link
Copy Markdown

@illionillion illionillion commented Mar 9, 2026

What/Why/How?

This PR adds smooth accordion animation for nested items in the left sidebar menu.

Why:

  • current expand/collapse is abrupt
  • smoother transitions improve UX without changing navigation logic

How:

  • replaced abrupt nested list show/hide behavior with animated height transition
  • uses measured scrollHeight for smooth open/close
  • keeps root menu behavior unchanged
  • preserves accessibility semantics (role="menu" for root, aria-hidden for collapsed nested lists)
  • respects prefers-reduced-motion

Reference

Closes #2778

Tests

  • Added regression tests:
    • src/components/__tests__/menuItemsA11y.test.ts
  • Local checks:
    • npm run bundle
    • npm test
    • npm run e2e ⚠️ fails locally with ERR_INVALID_CHAR on x-cypress-file-path in this environment (workspace path contains non-ASCII characters). CI should validate e2e in standard runner paths.

Screenshots (optional)

Befor

Screencast.from.2026-03-10.00-40-19.webm

After

Screencast.from.2026-03-10.00-43-23.webm

Check yourself

  • Code is linted
  • Tested
  • All new/updated code is covered with tests

@illionillion illionillion requested a review from a team as a code owner March 9, 2026 15:47
@illionillion
Copy link
Copy Markdown
Author

@adamaltman

Friendly ping when you have a moment 🙏
I added a screen recording and kept the scope small (sidebar accordion animation only, with tests).
Happy to make any adjustments if needed.

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.

Sidebar nested menu expand/collapse has no animation (feels abrupt)

1 participant