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

* bug(v2): fix active sidebar item detection logic (https://github.com/facebook/docusaurus/pull/2682#issuecomment-636631225)

* fix sidebar category collapsed normalization to make sure we always have a boolean after normalization

* fix sidebarCollapsible option

packages/docusaurus-plugin-content-docs/src/__tests__/__fixtures__/sidebars/sidebars-category.js

@@ -9,30 +9,25 @@ module.exports = {
   docs: [
     {
       type: 'category',
-      collapsed: true,
       label: 'level 1',
       items: [
         'a',
         {
           type: 'category',
-          collapsed: true,
           label: 'level 2',
           items: [
             {
               type: 'category',
-              collapsed: true,
               label: 'level 3',
               items: [
                 'c',
                 {
                   type: 'category',
-                  collapsed: true,
                   label: 'level 4',
                   items: [
                     'd',
                     {
                       type: 'category',
-                      collapsed: true,
                       label: 'deeper more more',
                       items: ['e'],
                     },

packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/index.test.ts.snap

@@ -7,6 +7,7 @@ Object {
       "collapsed": true,
       "items": Array [
         Object {
+          "collapsed": true,
           "items": Array [
             Object {
               "href": "/docs/foo/bar",

packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/sidebars.test.ts.snap

@@ -157,6 +157,7 @@ exports[`loadSidebars sidebars with first level not a category 1`] = `
 Object {
   "docs": Array [
     Object {
+      "collapsed": true,
       "items": Array [
         Object {
           "id": "greeting",

packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/version.test.ts.snap

@@ -7,6 +7,7 @@ Object {
       "collapsed": true,
       "items": Array [
         Object {
+          "collapsed": true,
           "items": Array [
             Object {
               "id": "version-1.0.0/foo/bar",

packages/docusaurus-plugin-content-docs/src/sidebars.ts

@@ -25,6 +25,9 @@ function isCategoryShorthand(
   return typeof item !== 'string' && !item.type;
 }
 
+// categories are collapsed by default, unless user set collapsed = false
+const defaultCategoryCollapsedValue = true;
+
 /**
  * Convert {category1: [item1,item2]} shorthand syntax to long-form syntax
  */
@@ -33,7 +36,7 @@ function normalizeCategoryShorthand(
 ): SidebarItemCategoryRaw[] {
   return Object.entries(sidebar).map(([label, items]) => ({
     type: 'category',
-    collapsed: true,
+    collapsed: defaultCategoryCollapsedValue,
     label,
     items,
   }));
@@ -118,7 +121,13 @@ function normalizeItem(item: SidebarItemRaw): SidebarItem[] {
   switch (item.type) {
     case 'category':
       assertIsCategory(item);
-      return [{...item, items: flatMap(item.items, normalizeItem)}];
+      return [
+        {
+          collapsed: defaultCategoryCollapsedValue,
+          ...item,
+          items: flatMap(item.items, normalizeItem),
+        },
+      ];
     case 'link':
       assertIsLink(item);
       return [item];

packages/docusaurus-plugin-content-docs/src/types.ts

@@ -42,7 +42,7 @@ export interface SidebarItemCategory {
   type: 'category';
   label: string;
   items: SidebarItem[];
-  collapsed?: boolean;
+  collapsed: boolean;
 }
 
 export interface SidebarItemCategoryRaw {