✨ sidebar ux changes for desktop

owid · Nov 1, 2023 · 3baee54 · 3baee54
1 parent 71b46ec
commit 3baee54
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git 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 = ({
                         <li>
                             <a
                                 onClick={() => {
-                                    toggleIsOpen()
+                                    toggleIsOpenOnMobile()
                                     setActiveHeading("")
                                 }}
                                 href="#"
@@ -180,7 +192,7 @@ export const TableOfContents = ({
                                     }
                                 >
                                     <a
-                                        onClick={toggleIsOpen}
+                                        onClick={toggleIsOpenOnMobile}
                                         href={`#${heading.slug}`}
                                         data-track-note="toc_link"
                                     >

diff --git 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)