DocSidebarItemCategory doesn't expand upon active menu changes under it

[qqq614]

Have you read the Contributing Guidelines on issues?

• [x] I have read the Contributing Guidelines on issues.

Prerequisites

• [x] I'm using the latest version of Docusaurus.
• [x] I have tried the npm run clear or yarn clear command.
• [x] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [x] I have tried creating a repro with https://new.docusaurus.io.
• [x] I have read the console error message carefully (if applicable).

Description

This may not be a bug but an improvement on the sidebar behavior. Currently DocSidebarItemCategory only expand itself when it changes from inactive to active using useAutoExpandActiveCategory function. However it maybe helpful to users if the category expand itself upon the active path changes while it is kept being active.

We have built a openapi documentation site using docusaurus-openapi-docs and we also have search enabled. Upon searching and clicking for menus that are already under the active category(if you see the video i posted), you can see that the category does not expand while searching and clicking for menus that are not under active category, it expands.

https://github.com/user-attachments/assets/2f4155ac-a836-4ac9-b55b-fdce116e8fa2

So we swizzled the component DocSidebarItemCategory and changed the function as below. This would allow the category menu to expand itself not only when category just becomes active but also when active menu changes under this category while it being active.

function useAutoExpandActiveCategory({
  isActive,
  collapsed,
  updateCollapsed,
  activePath
}: {
  isActive: boolean;
  collapsed: boolean;
  updateCollapsed: (b: boolean) => void;
  activePath: string;
}) {
  const wasActive = usePrevious(isActive);
  const previousActivePath = usePrevious(activePath);
  useEffect(() => {
    const justBecameActive = isActive && !wasActive;
    const stillActiveButPathChanged = isActive && wasActive && activePath !== previousActivePath;
    if ((justBecameActive || stillActiveButPathChanged) && collapsed) {
      updateCollapsed(false);
    }
  }, [activePath, isActive, wasActive, collapsed, updateCollapsed]);
}

Although the user can swizzle the component, I think it makes sense to make it a default behavior. Not only when searching but if you see the demo below, you can see category does not expand when menu under the same category becomes active.

Reproducible demo

https://stackblitz.com/edit/github-c5awx2cm?file=docs%2Ftutorial-extras%2Ftest-category-expansion.md

Steps to reproduce

1. https://stackblitz.com/edit/github-c5awx2cm?file=docs%2Ftutorial-extras%2Ftest-category-expansion.md
2. go to Tutorial - Extras > Test Expansion
3. Collapse Tutorial - Extras category
4. click go to menu under same category
5. see that Tutorial - Extras doesn't expand.

Expected behavior

Tutorial - Extras menu should expand when active menu changes under it.

Actual behavior

Tutorial - Extras menu doens't expand on active menu changes under it.

Your environment

• Public source code:
• Public site URL: https://apicenter.commerce.naver.com/docs/commerce-api/current
• Docusaurus version used: 3.7.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): 135.0.7049.96
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Mac Sequoia

Self-service

• [x] I'd be willing to fix this bug myself.