feat(theme-classic): auto-collapse sibling categories in doc sidebar

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

@@ -85,6 +85,9 @@ function DocPageContent({
               sidebarCollapsible={
                 siteConfig.themeConfig?.sidebarCollapsible ?? true
               }
+              autoCollapseSidebar={
+                siteConfig.themeConfig?.autoCollapseSidebar ?? true
+              }
               onCollapse={toggleSidebar}
               isHidden={hiddenSidebar}
             />

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState, useCallback, useEffect, useRef} from 'react';
+import React, {useState, useEffect, useRef} from 'react';
 import clsx from 'clsx';
 import {useThemeConfig, isSamePath} from '@docusaurus/theme-common';
 import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
@@ -46,6 +46,8 @@ function DocSidebarItemCategory({
   onItemClick,
   collapsible,
   activePath,
+  collapseItems,
+  autoCollapsed,
   ...props
 }) {
   const {items, label} = item;
@@ -80,18 +82,13 @@ function DocSidebarItemCategory({
     }
   }, [isActive, wasActive, collapsed]);
 
-  const handleItemClick = useCallback(
-    (e) => {
-      e.preventDefault();
-
-      if (!menuListHeight) {
-        handleMenuListHeight();
-      }
+  const handleItemClick = (category) => {
+    if (!menuListHeight) {
+      handleMenuListHeight();
+    }
 
-      setTimeout(() => setCollapsed((state) => !state), 100);
-    },
-    [menuListHeight],
-  );
+    collapseItems(category);
+  };
 
   if (items.length === 0) {
     return null;
@@ -100,7 +97,7 @@ function DocSidebarItemCategory({
   return (
     <li
       className={clsx('menu__list-item', {
-        'menu__list-item--collapsed': collapsed,
+        'menu__list-item--collapsed': item.collapsed,
       })}
       key={label}>
       <a
@@ -109,7 +106,7 @@ function DocSidebarItemCategory({
           'menu__link--active': collapsible && isActive,
           [styles.menuLinkText]: !collapsible,
         })}
-        onClick={collapsible ? handleItemClick : undefined}
+        onClick={collapsible ? () => handleItemClick(item) : undefined}
         href={collapsible ? '#!' : undefined}
         {...props}>
         {label}
@@ -130,6 +127,8 @@ function DocSidebarItemCategory({
             tabIndex={collapsed ? '-1' : '0'}
             key={childItem.label}
             item={childItem}
+            autoCollapsed={autoCollapsed}
+            parent={items}
             onItemClick={onItemClick}
             collapsible={collapsible}
             activePath={activePath}
@@ -174,9 +173,32 @@ function DocSidebarItemLink({
 }
 
 function DocSidebarItem(props) {
+  const {autoCollapsed, parent} = props;
+
+  const collapseItems = (item) => {
+    const isCollapsed = item.collapsed;
+
+    if (!isCollapsed) {
+      item.collapsed = !item.collapsed;
+    } else {
+      if (autoCollapsed) {
+        for (const s in parent) {
+          if (parent[s].type !== 'link') {
+            parent[s].collapsed = true;
+          } else {
+            parent[s].collapsed = false;
+          }
+        }
+      }
+      item.collapsed = !item.collapsed;
+    }
+  };
+
   switch (props.item.type) {
     case 'category':
-      return <DocSidebarItemCategory {...props} />;
+      return (
+        <DocSidebarItemCategory {...props} collapseItems={collapseItems} />
+      );
     case 'link':
     default:
       return <DocSidebarItemLink {...props} />;
@@ -187,6 +209,7 @@ function DocSidebar({
   path,
   sidebar,
   sidebarCollapsible = true,
+  autoCollapseSidebar = true,
   onCollapse,
   isHidden,
 }: Props): JSX.Element | null {
@@ -273,6 +296,8 @@ function DocSidebar({
                 setShowResponsiveSidebar(false);
               }}
               collapsible={sidebarCollapsible}
+              parent={sidebar}
+              autoCollapsed={autoCollapseSidebar}
               activePath={path}
             />
           ))}

packages/docusaurus-theme-classic/src/types.d.ts

@@ -79,6 +79,7 @@ declare module '@theme/DocSidebar' {
     readonly path: string;
     readonly sidebar: readonly PropSidebarItem[];
     readonly sidebarCollapsible?: boolean;
+    readonly autoCollapseSidebar?: boolean;
     readonly onCollapse: () => void;
     readonly isHidden: boolean;
   };

website/docs/docs.md

@@ -96,6 +96,20 @@ module.exports = {
 };
 ```
 
+### Auto Collapsable Sidebar
+
+Using the enabled `themeConfig.autoCollapseSidebar` option, you can make the sidebar only have one parent category open at a time, helping users not get cluttered and only focus on the content they selected. This is enabled by default, If you want them to be always opened, set `themeConfig.autoCollapseSidebar` to `false`:
+
+```js {4} title="docusaurus.config.js"
+module.exports = {
+  // ...
+  themeConfig: {
+    autoCollapseSidebar: false,
+    // ...
+  },
+};
+```
+
 ### Sidebar object
 
 A sidebar object is defined like this: