feat(v2): add ability expand all items in doc sidebar (#1876)

* feat(v2): add ability expand all items in doc sidebar

* Fix tests

* Refactor: use themeConfig

* Improve docs

* Revert unnecessary  changes

* Refactor: better consistency

* Revert extra change

* Refactor: use useDocusaurusContext to get config value

packages/docusaurus-theme-classic/src/theme/DocPage/index.js

@@ -8,6 +8,7 @@
 import React from 'react';
 import {MDXProvider} from '@mdx-js/react';
 
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import renderRoutes from '@docusaurus/renderRoutes';
 import Layout from '@theme/Layout';
 import DocSidebar from '@theme/DocSidebar';
@@ -19,6 +20,8 @@ function DocPage(props) {
   const {route, docsMetadata, location} = props;
   const {permalinkToSidebar, docsSidebars} = docsMetadata;
   const sidebar = permalinkToSidebar[location.pathname.replace(/\/$/, '')];
+  const {siteConfig: {themeConfig = {}} = {}} = useDocusaurusContext();
+  const {sidebarCollapsible = true} = themeConfig;
 
   return (
     <Layout noFooter>
@@ -29,6 +32,7 @@ function DocPage(props) {
               docsSidebars={docsSidebars}
               location={location}
               sidebar={sidebar}
+              sidebarCollapsible={sidebarCollapsible}
             />
           </div>
         )}

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js

@@ -14,7 +14,7 @@ import styles from './styles.module.css';
 
 const MOBILE_TOGGLE_SIZE = 24;
 
-function DocSidebarItem({item, onItemClick}) {
+function DocSidebarItem({item, onItemClick, collapsible}) {
   const {items, href, label, type} = item;
   const [collapsed, setCollapsed] = useState(item.collapsed);
   const [prevCollapsedProp, setPreviousCollapsedProp] = useState(null);
@@ -36,11 +36,12 @@ function DocSidebarItem({item, onItemClick}) {
           })}
           key={label}>
           <a
-            className={classnames('menu__link', 'menu__link--sublist', {
-              'menu__link--active': !item.collapsed,
+            className={classnames('menu__link', {
+              'menu__link--sublist': collapsible,
+              'menu__link--active': collapsible && !item.collapsed,
             })}
             href="#!"
-            onClick={() => setCollapsed(!collapsed)}>
+            onClick={collapsible ? () => setCollapsed(!collapsed) : undefined}>
             {label}
           </a>
           <ul className="menu__list">
@@ -49,6 +50,7 @@ function DocSidebarItem({item, onItemClick}) {
                 key={childItem.label}
                 item={childItem}
                 onItemClick={onItemClick}
+                collapsible={collapsible}
               />
             ))}
           </ul>
@@ -95,7 +97,12 @@ function mutateSidebarCollapsingState(item, location) {
 function DocSidebar(props) {
   const [showResponsiveSidebar, setShowResponsiveSidebar] = useState(false);
 
-  const {docsSidebars, location, sidebar: currentSidebar} = props;
+  const {
+    docsSidebars,
+    location,
+    sidebar: currentSidebar,
+    sidebarCollapsible,
+  } = props;
 
   if (!currentSidebar) {
     return null;
@@ -109,9 +116,11 @@ function DocSidebar(props) {
     );
   }
 
-  sidebarData.forEach(sidebarItem =>
-    mutateSidebarCollapsingState(sidebarItem, location),
-  );
+  if (sidebarCollapsible) {
+    sidebarData.forEach(sidebarItem =>
+      mutateSidebarCollapsingState(sidebarItem, location),
+    );
+  }
 
   return (
     <div className={styles.sidebar}>
@@ -162,6 +171,7 @@ function DocSidebar(props) {
               onItemClick={() => {
                 setShowResponsiveSidebar(false);
               }}
+              collapsible={sidebarCollapsible}
             />
           ))}
         </ul>