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 = ({
  • { - toggleIsOpen() + toggleIsOpenOnMobile() setActiveHeading("") }} href="#" @@ -180,7 +192,7 @@ export const TableOfContents = ({ } > diff --git a/site/hooks.ts b/site/hooks.ts index 275e8af2bcb..471853695a8 100644 --- a/site/hooks.ts +++ b/site/hooks.ts @@ -9,6 +9,8 @@ export const useTriggerWhenClickOutside = ( ) => { useEffect(() => { if (!active) return + // Don't toggle if viewport width is xxlg or larger + if (window.innerWidth >= 1536) return const handleClick = (e: MouseEvent) => { if (container && !container.current?.contains(e.target as Node)) { trigger(false)