feat(v2): make sidebar collapsible (#1817)

* feat(v2): make sidebar collapsible

* fix first page load sidebar category not collapsed

* misc(v2): nit

CHANGELOG-2.x.md

@@ -1,14 +1,16 @@
 # Docusaurus 2 Changelog
 
 ## Unreleased
-- Docs plugin is rewritten in TypeScript
-- Docs sidebar can now be more than one level deep, theoretically up to infinity.
-- more documentation ...
+
+- Docs, pages plugin is rewritten in TypeScript
+- Docs sidebar can now be more than one level deep, theoretically up to infinity
+- Collapsible docs sidebar!
+- More documentation ...
 
 ## 2.0.0-alpha.25
 
 - Blog plugin is rewritten in TypeScript and can now support CJK
-- Upgrade key direct dependencies such as webpack, mdx and babel to latest 
+- Upgrade key direct dependencies such as webpack, mdx and babel to latest
 - Do not escape html and body attributes
 - For devices with very small viewport width, the searchbar is replaced with a search icon. On tap of the search icon the searchbar is expanded and the text beside the logo is hidden and remains hidden while the search bar is expanded.
 - Add `date` frontMatter support for blog plugin
@@ -20,7 +22,7 @@
 - Remove unused metadata for pages. This minimize number of http request & smaller bundle size.
 - Upgrade dependencies of css-loader from 2.x to 3.x. Css modules localIdentName hash now only use the last 4 characters instead of 8.
 - Fix broken markdown linking replacement for mdx files
-- Fix potential security vulnerability because we're exposing the directory structure of the host machine. Instead of absolute path, we use relative path from site directory. Resulting in shorter webpack chunk naming and smaller bundle size. 
+- Fix potential security vulnerability because we're exposing the directory structure of the host machine. Instead of absolute path, we use relative path from site directory. Resulting in shorter webpack chunk naming and smaller bundle size.
 - Use contenthash instead of chunkhash for better long term caching
 - Allow user to customize generated heading from MDX. Swizzle `@theme/Heading`
 

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

@@ -24,7 +24,11 @@ function DocLegacyPage(props) {
       <div className="container container--fluid">
         <div className="row">
           <div className="col col--3">
-            <DocLegacySidebar docsSidebars={docsSidebars} sidebar={sidebar} />
+            <DocLegacySidebar
+              docsSidebars={docsSidebars}
+              location={location}
+              sidebar={sidebar}
+            />
           </div>
           <main className="col">
             <MDXProvider components={MDXComponents}>

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

@@ -14,49 +14,102 @@ import styles from './styles.module.css';
 
 const MOBILE_TOGGLE_SIZE = 24;
 
+function DocSidebarItem({item, onItemClick}) {
+  const {items, href, label, type} = item;
+  const [collapsed, setCollapsed] = useState(item.collapsed);
+  const [prevCollapsedProp, setPreviousCollapsedProp] = useState(null);
+
+  // If the collapsing state from props changed, probably a navigation event
+  // occurred. Overwrite the component's collapsed state with the props'
+  // collapsed value.
+  if (item.collapsed !== prevCollapsedProp) {
+    setPreviousCollapsedProp(item.collapsed);
+    setCollapsed(item.collapsed);
+  }
+
+  switch (type) {
+    case 'category':
+      return (
+        <li
+          className={classnames('menu__list-item', {
+            'menu__list-item--collapsed': collapsed,
+          })}
+          key={label}>
+          <a
+            className={classnames('menu__link', 'menu__link--sublist', {
+              'menu__link--active': !item.collapsed,
+            })}
+            href="#!"
+            onClick={() => setCollapsed(!collapsed)}>
+            {label}
+          </a>
+          <ul className="menu__list">
+            {items.map(childItem => (
+              <DocSidebarItem
+                key={childItem.label}
+                item={childItem}
+                onItemClick={onItemClick}
+              />
+            ))}
+          </ul>
+        </li>
+      );
+
+    case 'link':
+    default:
+      return (
+        <li className="menu__list-item" key={label}>
+          <Link
+            activeClassName="menu__link--active"
+            className="menu__link"
+            to={href}
+            onClick={onItemClick}>
+            {label}
+          </Link>
+        </li>
+      );
+  }
+}
+
+// Calculate the category collapsing state when a page navigation occurs.
+// We want to automatically expand the categories which contains the current page.
+function mutateSidebarCollapsingState(item, location) {
+  const {items, href, type} = item;
+  switch (type) {
+    case 'category': {
+      const anyChildItemsActive =
+        items
+          .map(childItem => mutateSidebarCollapsingState(childItem, location))
+          .filter(val => val).length > 0;
+      // eslint-disable-next-line no-param-reassign
+      item.collapsed = !anyChildItemsActive;
+      return anyChildItemsActive;
+    }
+
+    case 'link':
+    default:
+      return href === location.pathname.replace(/\/$/, '');
+  }
+}
+
 function DocLegacySidebar(props) {
   const [showResponsiveSidebar, setShowResponsiveSidebar] = useState(false);
-  const {docsSidebars, sidebar} = props;
 
-  if (!sidebar) {
+  const {docsSidebars, location, sidebar: currentSidebar} = props;
+
+  if (!currentSidebar) {
     return null;
   }
 
-  const thisSidebar = docsSidebars[sidebar];
+  const sidebarData = docsSidebars[currentSidebar];
 
-  if (!thisSidebar) {
-    throw new Error(`Can not find ${sidebar} config`);
+  if (!sidebarData) {
+    throw new Error(`Can not find ${currentSidebar} config`);
   }
 
-  const renderItem = item => {
-    switch (item.type) {
-      case 'category':
-        return (
-          <li className="menu__list-item" key={item.label}>
-            <a className="menu__link" href="#!">
-              {item.label}
-            </a>
-            <ul className="menu__list">{item.items.map(renderItem)}</ul>
-          </li>
-        );
-
-      case 'link':
-      default:
-        return (
-          <li className="menu__list-item" key={item.label}>
-            <Link
-              activeClassName="menu__link--active"
-              className="menu__link"
-              to={item.href}
-              onClick={() => {
-                setShowResponsiveSidebar(false);
-              }}>
-              {item.label}
-            </Link>
-          </li>
-        );
-    }
-  };
+  sidebarData.forEach(sidebarItem =>
+    mutateSidebarCollapsingState(sidebarItem, location),
+  );
 
   return (
     <div className={styles.sidebar}>
@@ -100,7 +153,15 @@ function DocLegacySidebar(props) {
           )}
         </button>
         <ul className="menu__list">
-          {thisSidebar.map(item => renderItem(item, {root: true}))}
+          {sidebarData.map(item => (
+            <DocSidebarItem
+              key={item.label}
+              item={item}
+              onItemClick={() => {
+                setShowResponsiveSidebar(false);
+              }}
+            />
+          ))}
         </ul>
       </div>
     </div>

website/src/css/custom.css

@@ -31,9 +31,3 @@ html[data-theme='dark'] {
     --ifm-font-size-base: 17px;
   }
 }
-
-.menu__list .menu__list .menu__list .menu__link {
-  font-size: 0.75em;
-  font-weight: normal;
-  color: #999;
-}