feat(sidebar): accordion menu with slide-down animation

[kzamanbd]

Summary

Reworks the settings sidebar menu (LayoutMenu) so top-level groups behave as a single-open accordion with a slide-down animation, and fixes a latch bug where more than one group could stay expanded.

Changes

• Accordion (single-open): open state for top-level groups is lifted to one shared openItemId in LayoutMenu. Opening a group collapses the others. Nested sub-items keep their own local state.
• Auto-open + default: the group owning the active item opens automatically; when nothing is active it falls back to the first group, so a menu is always expanded by default. The effect only fires when the derived target changes, so it never fights a manual toggle.
• Slide animation: expand/collapse animates via grid-template-rows: 0fr ↔ 1fr (clipped with overflow-hidden) — auto content height, pure CSS, both directions. Honors prefers-reduced-motion. Collapsed submenus stay mounted (aria-hidden) so the exit transition can play.
• MenuItemRenderer gains optional open / onToggle props; when onToggle is passed it is controlled (accordion), otherwise it keeps the previous local-state behavior for standalone use.

Bug fixed

Previously each parent kept independent local open state with a one-way auto-expand (opened on active-descendant, never closed). After navigating away, a group stayed open next to the newly-active one — most visibly the first group remained expanded on deep links into another group. Single shared state makes that impossible.

Behavior

Load	Expanded
Plain settings landing (no deep link)	first group
Deep link into another group	that (active) group only
Click a collapsed group	it opens, previously-open one collapses
Click the open group	collapses

Testing

Verified live in the Dokan admin settings via aria-expanded state:

• Single-open invariant holds across a sequence of toggles.
• Deep link opens only the active group (no first-menu flash across repeated samples).
• grid-template-rows interpolates 0 → full height over ~200ms on expand.
• npm run build (webpack + tsc types) and ESLint both clean.

Notes

• dist/ is gitignored, so this PR is source-only; consumers rebuild.

Summary by CodeRabbit

• New Features
  • Improved menu accordion behavior so only one top-level section can be expanded at a time.
  • Automatically opens the section containing the active page, with a fallback to the first expandable section.
  • Added smoother submenu expand/collapse transitions while preserving accessibility state.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 99c5ac3e-d46a-47b5-b768-7cc8b67d5c0f

📥 Commits

Reviewing files that changed from the base of the PR and between 4e3835d and e9eeb9c.

📒 Files selected for processing (1)

• src/components/wordpress/layout-menu.tsx

---

📝 Walkthrough

Walkthrough

LayoutMenu now controls top-level accordion expansion, while menu renderers support controlled and standalone modes. Submenus remain mounted in CSS transition containers and expose collapsed state through aria-hidden.

Changes

Layout menu accordion

Layer / File(s)	Summary
Accordion state and top-level wiring src/components/wordpress/layout-menu.tsx	LayoutMenu tracks one open parent, derives it from the active descendant or a fallback expandable item, and passes controlled state and toggle callbacks to top-level renderers.
Controlled and standalone renderer modes src/components/wordpress/layout-menu.tsx	MenuItemRenderer uses parent-owned expansion state when controlled and retains local active-descendant expansion otherwise.
Persistent submenu transitions src/components/wordpress/layout-menu.tsx	Top-level and nested submenus remain mounted inside grid-row transition containers with overflow handling and aria-hidden updates.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant LayoutMenu
  participant MenuItemRenderer
  participant SubMenuItemRenderer

  User->>MenuItemRenderer: Toggle top-level parent
  MenuItemRenderer->>LayoutMenu: Invoke onToggle
  LayoutMenu->>LayoutMenu: Update openItemId
  LayoutMenu->>MenuItemRenderer: Pass controlled open state
  MenuItemRenderer->>SubMenuItemRenderer: Render submenu transition

Loading

Possibly related PRs

• getdokan/plugin-ui#56: Introduces the layout-menu implementation that this accordion and submenu behavior extends.
• getdokan/plugin-ui#72: Reworks related parent expansion state, toggle handling, and submenu rendering in the same component.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/settings-sidebar-accordion

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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