🎉 add scrollTo when expanding SiteNavigationToggle on mobile

owid · Feb 19, 2025 · c14269b · c14269b
1 parent 14cf231
commit c14269b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/site/SiteMobileMenu.tsx b/site/SiteMobileMenu.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useRef, useState } from "react"
 import { CategoryWithEntries } from "@ourworldindata/utils"
 import classnames from "classnames"
 import { SiteNavigationToggle } from "./SiteNavigationToggle.js"
@@ -21,6 +21,8 @@ export const SiteMobileMenu = ({
     const [activeCategory, setActiveCategory] =
         useState<CategoryWithEntries | null>(null)
 
+    const menuRef = useRef<HTMLDivElement>(null)
+
     const toggleCategory = (category: CategoryWithEntries) => {
         if (activeCategory === category) {
             setActiveCategory(null)
@@ -30,7 +32,7 @@ export const SiteMobileMenu = ({
     }
 
     return (
-        <div className={classnames("SiteMobileMenu", className)}>
+        <div ref={menuRef} className={classnames("SiteMobileMenu", className)}>
             <ul>
                 <li>
                     <span className="section__header">Browse by topic</span>
@@ -69,6 +71,8 @@ export const SiteMobileMenu = ({
                         dropdown={<SiteResources />}
                         withCaret={true}
                         className="SiteNavigationToggle--lvl1"
+                        shouldScrollIntoView
+                        menuRef={menuRef}
                     >
                         Resources
                     </SiteNavigationToggle>
@@ -85,6 +89,8 @@ export const SiteMobileMenu = ({
                         dropdown={<SiteAbout />}
                         withCaret={true}
                         className="SiteNavigationToggle--lvl1"
+                        shouldScrollIntoView
+                        menuRef={menuRef}
                     >
                         About
                     </SiteNavigationToggle>

diff --git a/site/SiteNavigationToggle.tsx b/site/SiteNavigationToggle.tsx
@@ -11,6 +11,8 @@ export const SiteNavigationToggle = ({
     withCaret = false,
     dropdown,
     className,
+    shouldScrollIntoView = false,
+    menuRef,
 }: {
     ariaLabel: string
     children: React.ReactNode
@@ -19,7 +21,24 @@ export const SiteNavigationToggle = ({
     withCaret?: boolean
     dropdown?: React.ReactNode
     className?: string
+    shouldScrollIntoView?: boolean
+    menuRef?: React.RefObject<HTMLDivElement>
 }) => {
+    React.useLayoutEffect(() => {
+        if (shouldScrollIntoView && isActive && menuRef?.current) {
+            const menuBottomOffset =
+                menuRef.current.getBoundingClientRect().bottom
+
+            // put bottom of the menu at the bottom of the viewport if it's offscreen
+            if (menuBottomOffset > window.innerHeight) {
+                window.scrollTo({
+                    top: menuBottomOffset - window.innerHeight + window.scrollY,
+                    behavior: "smooth",
+                })
+            }
+        }
+    }, [shouldScrollIntoView, menuRef, isActive])
+
     return (
         <div
             className={cx("SiteNavigationToggle", className, {