3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 10:17:55 +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
Show stats 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({
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 &&