diff --git a/site/TableOfContents.tsx b/site/TableOfContents.tsx index 2511c13b0d8..1b283bb4f83 100644 --- a/site/TableOfContents.tsx +++ b/site/TableOfContents.tsx @@ -53,9 +53,21 @@ export const TableOfContents = ({ const toggleIsOpen = () => { setIsOpen(!isOpen) } + // The Gdocs sidebar can't rely on the same CSS logic that old-style entries use, so we need to + // explicitly trigger these toggles based on screen width + const toggleIsOpenOnMobile = () => { + if (window.innerWidth < 1536) { + toggleIsOpen() + } + } useTriggerWhenClickOutside(tocRef, isOpen, setIsOpen) + // Open the sidebar on desktop by default when mounting + useEffect(() => { + setIsOpen(window.innerWidth >= 1536) + }, []) + useEffect(() => { if ("IntersectionObserver" in window) { const previousHeadings = headings.map((heading, i) => ({ @@ -152,7 +164,7 @@ export const TableOfContents = ({