From a07792640b009f31a12bb6f2e47baaaf7715b7e2 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sat, 26 Oct 2019 05:20:14 +0300
Subject: [PATCH] fix(v2): do not show category with empty items

---
 CHANGELOG-2.x.md                              |  1 +
 .../src/theme/DocSidebar/index.js             | 75 ++++++++++---------
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md
index a0b9a98b8c78..02ad56e2e83d 100644
--- a/CHANGELOG-2.x.md
+++ b/CHANGELOG-2.x.md
@@ -9,6 +9,7 @@
 - Fix search bar focus bug. When you put the focus on search input, previously the focus will remain although we have clicked to other area outside of the search input.
 - New themeConfig option `sidebarCollapsible`. It is on by default. If explicitly set to `false`, all doc items in sidebar is expanded. Otherwise, it will still be a collapsible sidebar.
 - Disable adding hashes to the generated class names of CSS modules in dev mode. Generating unique identifiers takes some time, which can be saved since including paths to files in class names is enough to avoid collisions.
+- Fix showing sidebar category with empty items.
 
 ## 2.0.0-alpha.30
 
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
index 2e863bb1711a..686b35192702 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
@@ -30,31 +30,35 @@ function DocSidebarItem({item, onItemClick, collapsible}) {
   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': collapsible,
-              'menu__link--active': collapsible && !item.collapsed,
+        items.length > 0 && (
+          <li
+            className={classnames('menu__list-item', {
+              'menu__list-item--collapsed': collapsed,
             })}
-            href="#!"
-            onClick={collapsible ? () => setCollapsed(!collapsed) : undefined}>
-            {label}
-          </a>
-          <ul className="menu__list">
-            {items.map(childItem => (
-              <DocSidebarItem
-                key={childItem.label}
-                item={childItem}
-                onItemClick={onItemClick}
-                collapsible={collapsible}
-              />
-            ))}
-          </ul>
-        </li>
+            key={label}>
+            <a
+              className={classnames('menu__link', {
+                'menu__link--sublist': collapsible,
+                'menu__link--active': collapsible && !item.collapsed,
+              })}
+              href="#!"
+              onClick={
+                collapsible ? () => setCollapsed(!collapsed) : undefined
+              }>
+              {label}
+            </a>
+            <ul className="menu__list">
+              {items.map(childItem => (
+                <DocSidebarItem
+                  key={childItem.label}
+                  item={childItem}
+                  onItemClick={onItemClick}
+                  collapsible={collapsible}
+                />
+              ))}
+            </ul>
+          </li>
+        )
       );
 
     case 'link':
@@ -164,16 +168,19 @@ function DocSidebar(props) {
           )}
         </button>
         <ul className="menu__list">
-          {sidebarData.map(item => (
-            <DocSidebarItem
-              key={item.label}
-              item={item}
-              onItemClick={() => {
-                setShowResponsiveSidebar(false);
-              }}
-              collapsible={sidebarCollapsible}
-            />
-          ))}
+          {sidebarData.map(
+            item =>
+              item.items.length > 0 && (
+                <DocSidebarItem
+                  key={item.label}
+                  item={item}
+                  onItemClick={() => {
+                    setShowResponsiveSidebar(false);
+                  }}
+                  collapsible={sidebarCollapsible}
+                />
+              ),
+          )}
         </ul>
       </div>
     </div>