Add nav highlighting on scroll!!

Author: jason-roundtree

web/components/NavMenu.js

@@ -1,5 +1,4 @@
-import React from 'react'
-import { Link } from 'gatsby'
+import React, { useEffect } from 'react'
 import styled from 'styled-components'
 
 const NavMenuPanel = styled.nav`
@@ -19,12 +18,11 @@ const A = styled.a`
     }
 `
 
-export default function NavMenu({ data, handleNavMenuToggle }) {
+export default function NavMenu({ data, handleNavMenuToggle, activeSection }) {
     // console.log('menu props: ', data)
-
     return (
         <NavMenuPanel>
-            <ul>
+            <ul id="navmenu_list">
                 <li>
                     <A href='#top-of-page'>Home</A>
                 </li>
@@ -34,6 +32,8 @@ export default function NavMenu({ data, handleNavMenuToggle }) {
                             <A 
                                 href={`#${node.anchor_id}`}
                                 onClick={handleNavMenuToggle}
+                                // TODO: instead of keeping current-section class in css file is there a way to do it with styled-components props and Gatsby
+                                className={node.anchor_id === activeSection && 'current-section'}
                             >
                                 {node.name}
                             </A>

web/components/layout.js

@@ -26,9 +26,7 @@ export default function Layout({ children }) {
                 </nav>
             </header>
 
-            <>
-                {children}
-            </>
+            <>{children}</>
 
         </div>
     )

web/src/pages/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { graphql } from 'gatsby'
 import styled from 'styled-components'
 import Layout from '../../components/layout'
-import Footer from '../../components/footer'
+import Footer from '../../components/Footer'
 import ToC from '../../components/TableOfContents'
 import NavMenu from '../../components/NavMenu'
 import TopicSection from '../../components/TopicSection'
@@ -33,17 +33,58 @@ export default function Index({ data }) {
   // these "nav" references are for the secondary nav that appears once you've scrolled past table of contents
   const [navIsActive, setNavIsActive] = useState(false)
   const [navMenuIsActive, setNavMenuIsActive] = useState(false)
-  // console.log('Index data: ', data)
+  const [activeSection, setActiveSection] = useState(null)
 
   useEffect(() => {
     window.addEventListener('scroll', handleScroll)
+    window.addEventListener('scroll', handleObserver)
     return () => {
       window.removeEventListener('scroll', handleScroll)
+      // TODO: this should be here, right?
+      window.addEventListener('scroll', handleObserver)
     }
   }, [])
 
+  function handleObserver() {
+    const options = { rootMargin: '-30px 0px -50% 0px' };
+    const observer = new IntersectionObserver(checkIntersection, options)
+
+    const topicSections = document.querySelectorAll('section')
+    topicSections.forEach(section => {
+      observer.observe(section)
+    })
+    
+    function checkIntersection(entries) {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          intersectionHandler(entry)
+        }
+      })
+    }
+
+    function intersectionHandler(entry) {
+      // console.log('intersectionHandler entry: ', entry)
+      const id = entry.target.id      
+      setActiveSection(id)
+      const currentlyActive = document.querySelector('#navmenu_list .current-section')
+      // console.log('currentlyActive: ', currentlyActive)
+      const shouldBeActive = document.querySelector(`#navmenu_list a[href='#${id}']`)
+      // console.log('shouldBeActive: ', shouldBeActive)
+      if (currentlyActive) {
+        currentlyActive.classList.remove('current-section')
+        // console.log('currentlyActive if: ', currentlyActive)
+      }
+      if (shouldBeActive) {
+        shouldBeActive.classList.add('current-section')
+        // console.log('shouldBeActive if: ', shouldBeActive)
+      }
+    }
+  }
+
   function handleScroll() {
     console.log('handleScroll')
+    // TODO: is this all neccessary for cross-browser issues?
+    // setDocScrollTop(Math.max(document.documentElement.scrollTop, document.body.scrollTop))
     // TODO: replace offset number with calculation that determines once ToC section has been passed
     if (window.pageYOffset > 900) {
       setNavIsActive(true)
@@ -56,9 +97,9 @@ export default function Index({ data }) {
   function handleNavMenuToggle() {
     setNavMenuIsActive(navMenuIsActive ? false : true)
   }
-
+  
   return (
-    <>
+    <div>
       <Layout id="top-of-page">
           <ToC data={data.allSanitySection.edges} />
 
@@ -84,13 +125,15 @@ export default function Index({ data }) {
             <NavMenu 
               data={data.allSanitySection.edges} 
               handleNavMenuToggle={handleNavMenuToggle}
+              activeSection={activeSection}
+              id="navmenu_list"
             />
           )}
         </SecondaryNavBar>
       )}
 
       <Footer />
-    </>
+    </div>
   )
 }
 

web/src/styles/global.css

@@ -235,6 +235,15 @@ footer span {
     line-height: 1.5;
 }
 
+.current-section.current-section {
+    color: rgb(144, 210, 245);
+}
+
+.highlight.highlight {
+    /* font-size: 1.2em; */
+    color: rgb(144, 210, 245);
+}
+
 @media screen and (max-width: 672px) {
     body {
         font-size: .8em;