fix(v2): fix FOUC in doc sidebar and various improvements

[slorber]

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.

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit a3d7517

https://deploy-preview-2867--docusaurus-2.netlify.app

[slorber]

Removed on purpose, to test that the normalization process actually fallbacks to true

[slorber]

Can detect active items with infinite category levels

[slorber]

very dangerous, particularly on the server, as mutating any object of sidebarData would affect other pages rendering

[lex111]

Unfortunately, the sidebarCollapsible option (when sidebarCollapsible = false) became broken after this refactoring.

Current	Should be

[slorber]

thanks @lex111 that should be fixed now

[lex111]

Awesome work! 👏

[slorber]

thanks :)

[jsjoeio]

Wow! You're so quick. Fantastic work @slorber - thank you for cleaning up the small mess I made 😜 but seriously, you rock! 💯

[slorber]

thanks 😃