index.js•1.48 kB
import React, { useState } from "react";
import clsx from "clsx";
import { ThemeClassNames } from "@docusaurus/theme-common";
import {
useAnnouncementBar,
useScrollPosition,
} from "@docusaurus/theme-common/internal";
import { translate } from "@docusaurus/Translate";
import DocSidebarItems from "@theme/DocSidebarItems";
import styles from "./styles.module.css";
function useShowAnnouncementBar() {
const { isActive } = useAnnouncementBar();
const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
useScrollPosition(
({ scrollY }) => {
if (isActive) {
setShowAnnouncementBar(scrollY === 0);
}
},
[isActive],
);
return isActive && showAnnouncementBar;
}
export default function DocSidebarDesktopContent({ path, sidebar, className }) {
const showAnnouncementBar = useShowAnnouncementBar();
return (
<nav
aria-label={translate({
id: "theme.docs.sidebar.navAriaLabel",
message: "Docs sidebar",
description: "The ARIA label for the sidebar navigation",
})}
className={clsx(
// We had to swizzle the sidebar to remove the thin_scrollbar class
"menu",
styles.menu,
showAnnouncementBar && styles.menuWithAnnouncementBar,
className,
)}
>
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, "menu__list")}>
<DocSidebarItems items={sidebar} activePath={path} level={1} />
</ul>
</nav>
);
}