fix(DocsLayout): keep sidebar open while dropdown menu is active

[sukvvon]

Summary

Keep the docs sidebar open while a dropdown menu opened from inside it (e.g. FrameworkSelect, VersionSelect) is active. The sidebar will only close after the dropdown is dismissed.

Why

When a user hovered the sidebar to expand it and then opened the framework or version select, moving the pointer away from the sidebar (e.g. into the dropdown options or any blank space) closed the sidebar while the dropdown remained open. This left the dropdown floating without its parent context, which is disorienting.

Approach

In onPointerLeave of the expanded menu, check whether any element with data-state="open" exists inside expandedMenuRef. If so, skip the close timer. Once the dropdown closes, the next leave event behaves normally.

This scopes the check to the sidebar's own dropdown triggers, so unrelated dropdowns elsewhere on the page are not affected.

Screenshot

AS-IS

TO-BE

Summary by CodeRabbit

• Bug Fixes
  • Enhanced sidebar behavior: the documentation sidebar no longer automatically collapses when your cursor leaves it while a dropdown menu is open. This prevents unintended sidebar closure during dropdown menu interactions, providing a more fluid experience when navigating documentation on desktop and tablet devices.

[netlify]

👷 Deploy request for tanstack pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	8fcce4d

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: dc985e32-fc60-447f-a725-21dea4a59067

📥 Commits

Reviewing files that changed from the base of the PR and between 1e63ccf and 04f00be.

📒 Files selected for processing (1)

• src/components/DocsLayout.tsx

---

📝 Walkthrough

Walkthrough

The sidebar auto-hide behavior in DocsLayout was enhanced to prevent hiding when a dropdown menu inside the sidebar is open. A check for [data-state="open"] on non-touch inputs ensures the sidebar remains visible while dropdown interactions are active.

Changes

Cohort / File(s)	Summary
Sidebar Dropdown State Handling src/components/DocsLayout.tsx	Added early return check to prevent sidebar auto-hide when a dropdown inside the sidebar is open on non-touch inputs, preserving dropdown state visibility.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A sidebar that listens, oh what delight!
When dropdowns are open, they stay in sight.
No hasty retreat when a menu's unfurled,
This rabbit hops forward—a smoother UX world! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(DocsLayout): keep sidebar open while dropdown menu is active' directly and precisely summarizes the main change: preventing sidebar auto-close when a dropdown is open.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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