in src/theme/DocRoot/Layout/Sidebar/index.tsx [24:77]
export default function DocRootLayoutSidebar({
sidebar,
hiddenSidebarContainer,
setHiddenSidebarContainer,
}: Props): JSX.Element {
const {pathname} = useLocation();
const [hiddenSidebar, setHiddenSidebar] = useState(false);
const toggleSidebar = useCallback(() => {
if (hiddenSidebar) {
setHiddenSidebar(false);
}
// onTransitionEnd won't fire when sidebar animation is disabled
// fixes https://github.com/facebook/docusaurus/issues/8918
if (!hiddenSidebar && prefersReducedMotion()) {
setHiddenSidebar(true);
}
setHiddenSidebarContainer((value) => !value);
}, [setHiddenSidebarContainer, hiddenSidebar]);
return (
<aside
className={clsx(
ThemeClassNames.docs.docSidebarContainer,
styles.docSidebarContainer,
hiddenSidebarContainer && styles.docSidebarContainerHidden,
)}
onTransitionEnd={(e) => {
if (!e.currentTarget.classList.contains(styles.docSidebarContainer!)) {
return;
}
if (hiddenSidebarContainer) {
setHiddenSidebar(true);
}
}}>
<ResetOnSidebarChange>
<div
className={clsx(
styles.sidebarViewport,
hiddenSidebar && styles.sidebarViewportHidden,
)}>
<DocSidebar
sidebar={sidebar}
path={pathname}
onCollapse={toggleSidebar}
isHidden={hiddenSidebar}
/>
{hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
</div>
</ResetOnSidebarChange>
</aside>
);
}