3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-27 05:28:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(theme-classic): autocollapse sidebar categories when navigating with paginator (#7411)

Browse source 
* 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>
This commit is contained in:
Pranab Das 2022-05-14 13:37:59 +08:00 • committed by GitHub
parent d2ca4a171c
commit 3f110a36bd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

25
packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx
View file

@ -31,19 +31,19 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
function useAutoExpandActiveCategory({ function useAutoExpandActiveCategory({
isActive, isActive,
collapsed, collapsed,
setCollapsed, updateCollapsed,
}: { }: {
isActive: boolean; isActive: boolean;
collapsed: boolean; collapsed: boolean;
setCollapsed: (b: boolean) => void; updateCollapsed: (b: boolean) => void;
}) { }) {
const wasActive = usePrevious(isActive); const wasActive = usePrevious(isActive);
useEffect(() => { useEffect(() => {
const justBecameActive = isActive && !wasActive; const justBecameActive = isActive && !wasActive;
if (justBecameActive && collapsed) { 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
}: Props): JSX.Element { }: Props): JSX.Element {
const {items, label, collapsible, className, href} = item; const {items, label, collapsible, className, href} = item;
const {
docs: {
sidebar: {autoCollapseCategories},
},
} = useThemeConfig();
const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item); const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
const isActive = isActiveSidebarItem(item, activePath); const isActive = isActiveSidebarItem(item, activePath);
@ -121,17 +126,13 @@ export default function DocSidebarItemCategory({
}, },
}); });
useAutoExpandActiveCategory({isActive, collapsed, setCollapsed});
const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState(); 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); setExpandedItem(toCollapsed ? null : index);
setCollapsed(toCollapsed); setCollapsed(toCollapsed);
} };
const { useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
docs: {
sidebar: {autoCollapseCategories},
},
} = useThemeConfig();
useEffect(() => { useEffect(() => {
if ( if (
collapsible && collapsible &&