From 7ae56b30fa81fd26b202f54cddeff2d6e0fb1b7c Mon Sep 17 00:00:00 2001 From: Pranab Das <31024886+pranabdas@users.noreply.github.com> Date: Fri, 13 May 2022 13:24:52 +0800 Subject: [PATCH 1/7] fix: autocollapse sidebar categories Auto collapse sidebar categories when navigating via paginator. --- .../src/theme/DocSidebarItem/Category.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 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..d108109355a4 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx @@ -38,10 +38,23 @@ function useAutoExpandActiveCategory({ setCollapsed: (b: boolean) => void; }) { const wasActive = usePrevious(isActive); + const { + docs: { + sidebar: {autoCollapseCategories}, + }, + } = useThemeConfig(); useEffect(() => { const justBecameActive = isActive && !wasActive; - if (justBecameActive && collapsed) { - setCollapsed(false); + if (autoCollapseCategories) { + if (isActive && collapsed) { + setCollapsed(false); + } else if (!isActive && wasActive) { + setCollapsed(true); + } + } else { + if (justBecameActive && collapsed) { + setCollapsed(false); + } } }, [isActive, wasActive, collapsed, setCollapsed]); } From 6ad75b44f7f7291734c65f850a1f9011148395f2 Mon Sep 17 00:00:00 2001 From: Pranab Das <31024886+pranabdas@users.noreply.github.com> Date: Fri, 13 May 2022 13:42:38 +0800 Subject: [PATCH 2/7] Add autoCollapseCategories in dependency array --- .../src/theme/DocSidebarItem/Category.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx index d108109355a4..af4e136622f0 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx @@ -51,12 +51,10 @@ function useAutoExpandActiveCategory({ } else if (!isActive && wasActive) { setCollapsed(true); } - } else { - if (justBecameActive && collapsed) { + } else if (justBecameActive && collapsed) { setCollapsed(false); } - } - }, [isActive, wasActive, collapsed, setCollapsed]); + }, [isActive, wasActive, collapsed, setCollapsed, autoCollapseCategories]); } /** From 3918a4f85ef60d8f431bce5154261a3ed0c664d4 Mon Sep 17 00:00:00 2001 From: Pranab Das <31024886+pranabdas@users.noreply.github.com> Date: Fri, 13 May 2022 15:55:55 +0800 Subject: [PATCH 3/7] restore collapse button behavior --- .../src/theme/DocSidebarItem/Category.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx index af4e136622f0..f8ecfe244dc6 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx @@ -46,14 +46,14 @@ function useAutoExpandActiveCategory({ useEffect(() => { const justBecameActive = isActive && !wasActive; if (autoCollapseCategories) { - if (isActive && collapsed) { + if (justBecameActive && collapsed) { setCollapsed(false); } else if (!isActive && wasActive) { setCollapsed(true); } } else if (justBecameActive && collapsed) { - setCollapsed(false); - } + setCollapsed(false); + } }, [isActive, wasActive, collapsed, setCollapsed, autoCollapseCategories]); } From f25b7056bf366bc28e3ba2ac09d7ac172bc7f0e6 Mon Sep 17 00:00:00 2001 From: Pranab Das <31024886+pranabdas@users.noreply.github.com> Date: Fri, 13 May 2022 16:27:06 +0800 Subject: [PATCH 4/7] simplify Co-authored-by: Joshua Chen --- .../src/theme/DocSidebarItem/Category.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx index f8ecfe244dc6..2d3ece5de551 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx @@ -45,15 +45,12 @@ function useAutoExpandActiveCategory({ } = useThemeConfig(); useEffect(() => { const justBecameActive = isActive && !wasActive; - if (autoCollapseCategories) { - if (justBecameActive && collapsed) { - setCollapsed(false); - } else if (!isActive && wasActive) { - setCollapsed(true); - } - } else if (justBecameActive && collapsed) { + if (justBecameActive && collapsed) { setCollapsed(false); } + if (autoCollapseCategories && !isActive && wasActive) { + setCollapsed(true); + } }, [isActive, wasActive, collapsed, setCollapsed, autoCollapseCategories]); } From 7997c734b78ecabf40c81928fbab5391ba35fe16 Mon Sep 17 00:00:00 2001 From: Pranab Das <31024886+pranabdas@users.noreply.github.com> Date: Fri, 13 May 2022 22:00:08 +0800 Subject: [PATCH 5/7] hopefully a better fix --- .../src/theme/DocSidebarItem/Category.tsx | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx index 2d3ece5de551..8643b3cbc6cb 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx @@ -31,27 +31,23 @@ import useIsBrowser from '@docusaurus/useIsBrowser'; function useAutoExpandActiveCategory({ isActive, collapsed, + index, setCollapsed, }: { isActive: boolean; collapsed: boolean; + index: number; setCollapsed: (b: boolean) => void; }) { const wasActive = usePrevious(isActive); - const { - docs: { - sidebar: {autoCollapseCategories}, - }, - } = useThemeConfig(); + const {setExpandedItem} = useDocSidebarItemsExpandedState(); useEffect(() => { const justBecameActive = isActive && !wasActive; if (justBecameActive && collapsed) { setCollapsed(false); + setExpandedItem(index); } - if (autoCollapseCategories && !isActive && wasActive) { - setCollapsed(true); - } - }, [isActive, wasActive, collapsed, setCollapsed, autoCollapseCategories]); + }, [isActive, wasActive, collapsed, setCollapsed, setExpandedItem, index]); } /** @@ -129,7 +125,7 @@ export default function DocSidebarItemCategory({ }, }); - useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}); + useAutoExpandActiveCategory({isActive, collapsed, index, setCollapsed}); const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState(); function updateCollapsed(toCollapsed: boolean = !collapsed) { setExpandedItem(toCollapsed ? null : index); @@ -148,8 +144,16 @@ export default function DocSidebarItemCategory({ autoCollapseCategories ) { setCollapsed(true); + setExpandedItem(null); } - }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]); + }, [ + collapsible, + expandedItem, + index, + setCollapsed, + setExpandedItem, + autoCollapseCategories, + ]); return (
  • Date: Sat, 14 May 2022 12:45:01 +0800 Subject: [PATCH 6/7] refactor --- .../src/theme/DocSidebarItem/Category.tsx | 50 ++++++++++--------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx index 8643b3cbc6cb..9855f90c043f 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx @@ -5,7 +5,12 @@ * LICENSE file in the root directory of this source tree. */ -import React, {type ComponentProps, useEffect, useMemo} from 'react'; +import React, { + type ComponentProps, + useEffect, + useMemo, + useCallback, +} from 'react'; import clsx from 'clsx'; import { isActiveSidebarItem, @@ -31,23 +36,19 @@ import useIsBrowser from '@docusaurus/useIsBrowser'; function useAutoExpandActiveCategory({ isActive, collapsed, - index, - setCollapsed, + updateCollapsed, }: { isActive: boolean; collapsed: boolean; - index: number; - setCollapsed: (b: boolean) => void; + updateCollapsed: (b: boolean) => void; }) { const wasActive = usePrevious(isActive); - const {setExpandedItem} = useDocSidebarItemsExpandedState(); useEffect(() => { const justBecameActive = isActive && !wasActive; if (justBecameActive && collapsed) { - setCollapsed(false); - setExpandedItem(index); + updateCollapsed(false); } - }, [isActive, wasActive, collapsed, setCollapsed, setExpandedItem, index]); + }, [isActive, wasActive, collapsed, updateCollapsed]); } /** @@ -109,6 +110,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); @@ -125,17 +131,16 @@ export default function DocSidebarItemCategory({ }, }); - useAutoExpandActiveCategory({isActive, collapsed, index, setCollapsed}); const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState(); - function updateCollapsed(toCollapsed: boolean = !collapsed) { - setExpandedItem(toCollapsed ? null : index); - setCollapsed(toCollapsed); - } - const { - docs: { - sidebar: {autoCollapseCategories}, + // Use this instead of `setCollapsed`, because it is also reactive + const updateCollapsed = useCallback( + (toCollapsed: boolean) => { + setExpandedItem(toCollapsed ? null : index); + setCollapsed(toCollapsed); }, - } = useThemeConfig(); + [index, setCollapsed, setExpandedItem], + ); + useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed}); useEffect(() => { if ( collapsible && @@ -143,14 +148,13 @@ export default function DocSidebarItemCategory({ expandedItem !== index && autoCollapseCategories ) { - setCollapsed(true); - setExpandedItem(null); + updateCollapsed(true); } }, [ collapsible, expandedItem, index, - setCollapsed, + updateCollapsed, setExpandedItem, autoCollapseCategories, ]); @@ -184,7 +188,7 @@ export default function DocSidebarItemCategory({ updateCollapsed(false); } else { e.preventDefault(); - updateCollapsed(); + updateCollapsed(!collapsed); } } : () => { @@ -202,7 +206,7 @@ export default function DocSidebarItemCategory({ categoryLabel={label} onClick={(e) => { e.preventDefault(); - updateCollapsed(); + updateCollapsed(!collapsed); }} /> )} From 33d423c8829d89785a1ccbae48e60d2d411742ea Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Sat, 14 May 2022 12:57:28 +0800 Subject: [PATCH 7/7] try this --- .../src/theme/DocSidebarItem/Category.tsx | 33 +++++-------------- 1 file changed, 9 insertions(+), 24 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx index 9855f90c043f..49b52448bcd1 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx @@ -5,12 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import React, { - type ComponentProps, - useEffect, - useMemo, - useCallback, -} from 'react'; +import React, {type ComponentProps, useEffect, useMemo} from 'react'; import clsx from 'clsx'; import { isActiveSidebarItem, @@ -133,13 +128,10 @@ export default function DocSidebarItemCategory({ const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState(); // Use this instead of `setCollapsed`, because it is also reactive - const updateCollapsed = useCallback( - (toCollapsed: boolean) => { - setExpandedItem(toCollapsed ? null : index); - setCollapsed(toCollapsed); - }, - [index, setCollapsed, setExpandedItem], - ); + const updateCollapsed = (toCollapsed: boolean = !collapsed) => { + setExpandedItem(toCollapsed ? null : index); + setCollapsed(toCollapsed); + }; useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed}); useEffect(() => { if ( @@ -148,16 +140,9 @@ export default function DocSidebarItemCategory({ expandedItem !== index && autoCollapseCategories ) { - updateCollapsed(true); + setCollapsed(true); } - }, [ - collapsible, - expandedItem, - index, - updateCollapsed, - setExpandedItem, - autoCollapseCategories, - ]); + }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]); return (
  • { @@ -206,7 +191,7 @@ export default function DocSidebarItemCategory({ categoryLabel={label} onClick={(e) => { e.preventDefault(); - updateCollapsed(!collapsed); + updateCollapsed(); }} /> )}