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?

[i-onee]

hello @fuma-nama, I'm a little confused about the transition part of the Folder component when the content/page changes

screen-capture.webm

here is my component:

export const Folder: React.FC<{ item: Tree.Folder }> = ({ item }) => {
	const path = usePathname();
	const active = item.index ? item.index.url === path : false;

	const childActive = useMemo<boolean>(
		() => hasActive(item.children, path),
		[item.children, path],
	);

	const shouldExtend = active || childActive;
	const [open, setOpen] = useState<boolean>(shouldExtend);

	const Trigger = item.index ? Link : Button;

	const handleTrigger: MouseEventHandler = (e) => {
		if ((e.target as HTMLElement).closest("[data-icon]") || active) {
			e.preventDefault();
		}
		setOpen((prev) => !prev);
	};

	return (
		<div>
			<Trigger
				className={cn(
					"relative flex w-full items-center px-4 py-1.5 hover:bg-neutral-100",
					active && "bg-neutral-100",
				)}
				onClick={handleTrigger}
				href={item.index?.url!}
			>
				{item.icon}
				{item.name}
				<span className="absolute right-0 p-2" data-icon>
					<ChevronRight
						className={cn("transition-transform", open && "rotate-90")}
						size={"1em"}
					/>
				</span>
			</Trigger>
			<div
				data-state={open ? "open" : "closed"}
				className={cn(
					"ml-5 grid overflow-y-hidden border-l-2 pl-1 transition-[grid] data-[state=closed]:grid-rows-[minmax(0px,_0fr)] data-[state=open]:grid-rows-[minmax(0px,_1fr)]",
				)}
			>
				<TreeList items={item.children} />
			</div>
		</div>
	);
};

I created a custom sidebar to make the Folder component automatically open/close when changing pages/content, but the transition doesn't work for this case.

the component I created seems to be re-rendered when changing pages/content so the transition is like skipped 😅, but the transition still works properly if clicked directly on the sidebar.

[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 😁 🙏.