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

CHANGELOG-2.x.md

@@ -5,6 +5,7 @@
 - Add sticky footer.
 - Remove empty doc sidebar container
 - PostCSS preset env now only polyfills Stage 3 features (previously it was stage 2) like Create React App. Stage 2 CSS is considered relatively unstable and subject to change while Stage 3 features will likely become a standard.
+- Add ability expand all doc items in sidebar (same as `docsSideNavCollapsible` field in v1)
 
 ## 2.0.0-alpha.30
 

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', {
+            className={classnames('menu__link', {
-              'menu__link--active': !item.collapsed,
+              '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) {
     );
   }
 
+  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>

website/docs/migrating-from-v1-to-v2.md

@@ -161,7 +161,7 @@ Infima uses 7 shades of each color. We recommend using [ColorBox](https://www.co
 }
 ```
 
-#### `footerIcon`, `copyright`, `ogImage`, `twitterImage`
+#### `footerIcon`, `copyright`, `ogImage`, `twitterImage`, 'docsSideNavCollapsible'
 
 Site meta info such as assets, SEO, copyright info are now handled by themes. To customize them, use the `themeConfig` field in your `docusaurus.config.js`:
 
@@ -177,6 +177,8 @@ module.exports = {
       copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
     },
     image: 'img/docusaurus.png',
+    // Equivalent to `docsSideNavCollapsible`
+    sidebarCollapsible: false,
     ...
   },
 };
@@ -333,7 +335,7 @@ The following fields are all deprecated, you may remove from your configuration
 - `defaultVersionShown` - Versioning is not ported yet. You'd be unable to migration to Docusaurus 2 if you are using versioning. Stay tuned.
 - `disableHeaderTitle`
 - `disableTitleTagline`
-- `docsSideNavCollapsible` - This is turned on by default now.
+- `docsSideNavCollapsible` is available at `themeConfig.sidebarCollapsible`, and this is turned on by default now.
 - `facebookAppId`
 - `facebookComments`
 - `facebookPixelId`