From 3f110a36bd3b9fded1820df196955aa3b0a4efed Mon Sep 17 00:00:00 2001
From: Pranab Das <31024886+pranabdas@users.noreply.github.com>
Date: Sat, 14 May 2022 13:37:59 +0800
Subject: [PATCH] fix(theme-classic): autocollapse sidebar categories when
 navigating with paginator (#7411)

* fix: autocollapse sidebar categories

Auto collapse sidebar categories when navigating via paginator.

* Add autoCollapseCategories in dependency array

* restore collapse button behavior

* simplify

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* hopefully a better fix

* refactor

* try this

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
---
 .../src/theme/DocSidebarItem/Category.tsx     | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx
index 7a9a52e0e884..49b52448bcd1 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx
@@ -31,19 +31,19 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 function useAutoExpandActiveCategory({
   isActive,
   collapsed,
-  setCollapsed,
+  updateCollapsed,
 }: {
   isActive: boolean;
   collapsed: boolean;
-  setCollapsed: (b: boolean) => void;
+  updateCollapsed: (b: boolean) => void;
 }) {
   const wasActive = usePrevious(isActive);
   useEffect(() => {
     const justBecameActive = isActive && !wasActive;
     if (justBecameActive && collapsed) {
-      setCollapsed(false);
+      updateCollapsed(false);
     }
-  }, [isActive, wasActive, collapsed, setCollapsed]);
+  }, [isActive, wasActive, collapsed, updateCollapsed]);
 }
 
 /**
@@ -105,6 +105,11 @@ export default function DocSidebarItemCategory({
   ...props
 }: Props): JSX.Element {
   const {items, label, collapsible, className, href} = item;
+  const {
+    docs: {
+      sidebar: {autoCollapseCategories},
+    },
+  } = useThemeConfig();
   const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
 
   const isActive = isActiveSidebarItem(item, activePath);
@@ -121,17 +126,13 @@ export default function DocSidebarItemCategory({
     },
   });
 
-  useAutoExpandActiveCategory({isActive, collapsed, setCollapsed});
   const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
-  function updateCollapsed(toCollapsed: boolean = !collapsed) {
+  // Use this instead of `setCollapsed`, because it is also reactive
+  const updateCollapsed = (toCollapsed: boolean = !collapsed) => {
     setExpandedItem(toCollapsed ? null : index);
     setCollapsed(toCollapsed);
-  }
-  const {
-    docs: {
-      sidebar: {autoCollapseCategories},
-    },
-  } = useThemeConfig();
+  };
+  useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
   useEffect(() => {
     if (
       collapsible &&