Collapse sidebar folders automatically

[0sssama]

Currently, the sidebar stays a bit chaotic after a bit of navigation in a fumadocs-based documentation website. The user may open and go through many folders in the sidebar, but they remain open throughout the user's session. They can be closed using defaultOpenLevel: 0 but that would require the user to refresh the page for them to close.

Is there any way for us to configure the sidebar to automatically close all the folders when a new one opens?

[fuma-nama]

Almost no docs sites have a similar behavior, and I prefer to keep it simple and same as other frameworks.

[0sssama]

@fuma-nama is there any hack that we can do here?

[Gitstar-OC]

Then what are you confused about ?

[i-onee]

that, why the transition (collapse/expand) on Folder doesn't work when the page/content changes? is it because of the re-rendering reason when the page/content changes so that the transition is skipped?.

I see in the Collapsible component it uses keyframes to handle collapse/expand but in my case the Folder component flickers when the page/content changes when using keyframes 😅.

so is all this related to the re-rendering problem? and how to solve this.

[fuma-nama]

why the transition (collapse/expand) on Folder doesn't work when the page/content changes

Could you elaborate more? Do you mean the animation doesn't happen when clicking on the folder?

It could be the problem of your changes, you can revert to the original implementation, and simply call setOpen(true) when pathname is changed (with your own useOnChange hook or useEffect if performance isn't important).

I cannot help much with your own customization, not overriding it would give you fewer problems

[i-onee]

I got it, I should have put the sidebar in the layout.tsx section, not in the page.tsx section so that when the page/content changes the transition is not flickering. I missed the part in the documentation you provided regarding the sidebar,

and this is what I expect in my sidebar, in the layout.tsx section (the first sidebar).

screen-capture.webm

thanks for your response 😁 🙏.

[Gitstar-OC]

If users see this they will be like what am I doing in this world.