Motivation

CC @jsjoeio @lex111 @yangshun , this is a fix for #2682 (comment)

I investigated the reasons of the FOUC on the docs sidebar after adding the category.collapsed = false, but actually found multiple problems that lead me to this refactor (some of them existed before).

• Reading window.location to know which sidebar items are "active": that works only client-side after hydration, and was a reason of the FOUC. Replaced by activePath that's actually provided on both client and server (via ReactRouter ). Note it could have been possible to use useLocation from React-router as well.

• Bad normalization of the new category collapsed attribute. We want to ensure to always have a mandatory boolean for this setting in the metadata, otherwise we'll have to to const collapsed = maybeCollapsed ?? true everywhere.

• Non-recursive active sidebar item, which makes the Guides not being highlighted here

• Dangerous mutations during render. On the server, JS objects are not "reset" between page renders, so mutating the sidebar objects/props on one page actually affected the rendering of all other subsequent pages.

if (item.collapsed !== prevCollapsedProp) {
  setPreviousCollapsedProp(item.collapsed);
  setCollapsed(item.collapsed);
}

if (sidebarCollapsible) {
  sidebarData.forEach(sidebarItem =>
    mutateSidebarCollapsingState(sidebarItem, path)
  );
}

• Categories and links melted. This leads to declaring a collapsing state in links while collapsing is only affecting categories. I've splitted this way:

function DocSidebarItem(props) {
  switch (props.item.type) {
    case "category":
      return <DocSidebarItemCategory {...props} />;
    case "link":
    default:
      return <DocSidebarItemLink {...props} />;
  }
}

After this refactor, I think the collapsed feature works as intended and the code is cleaner than before.

Please tell me if you see a breaking change or issue with existing behavior.