Add basic nav menu toggling

Author: jason-roundtree

web/components/DescriptiveItem.js

@@ -25,7 +25,7 @@ const LineNo = styled.span`
 `
 
 export default function DescriptiveItem({ section }) {
-    console.log('DescriptiveItem props: ', section)
+    // console.log('DescriptiveItem props: ', section)
     return (
         <div>
             {section.subsections.map(secData => {

web/components/NavMenu.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const NavMenuPanel = styled.nav`
+    background-color: rgb(16, 16, 16);
+    opacity: .9;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    text-align: center;
+    /* TODO: how does scroll work when menu expands beyond bottom of window? (scroll currently operates on the content behind the menu) */
+    font-size: 1.2em;
+`
+const A = styled.a`
+    color: rgb(255, 159, 128);
+    &:hover {
+       border-bottom: 2px solid rgb(144, 210, 245);
+    }
+`
+
+export default function NavMenu({ data }) {
+    console.log('menu props: ', data)
+    return (
+        <NavMenuPanel>
+            <ul>
+                {data.map(({ node }) => {
+                    return node.section_active && (
+                        <li key={node._id}>
+                            <A href={`#${node.anchor_id}`}>
+                                {node.name}
+                            </A>
+                        </li>
+                    )
+                })}
+            </ul>
+        </NavMenuPanel>
+    )
+}

web/components/ShortcutTable.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default function ShortcutTable(props) {
-    console.log('ShortcutTable props: ', props)
+    // console.log('ShortcutTable props: ', props)
     return (
         <div className="table_container">
             <table>

web/components/TableOfContents.js

@@ -1,21 +1,14 @@
 import React from 'react'
-import styled from 'styled-components'
-
-// const H2 = styled.h2`
-//     margin-top: 50px;
-//     font-weight: 400;
-// `
 
 export default function TableOfContents({ data }) {
-    console.log('ToC data: ', data)
+    // console.log('ToC data: ', data)
     return (
         <div id="toc">
             <h2>Table of Contents</h2>
             <nav>
-                {/* TODO: figure out some way to order the different sections and subsections */}
                 <ul>
                     {data.map(({ node }) => {
-                        console.log('node map', node)
+                        // console.log('node map', node)
                         return (
                             <li key={node._id}>
                                 <a 

web/components/TopicSection.js

@@ -10,7 +10,7 @@ import DescriptiveItem from './DescriptiveItem'
 // `
 
 export default function TopicSection(props) {
-    console.log('TopicSection props: ', props)
+    // console.log('TopicSection props: ', props)
     return (
         <section 
             id={props.section.anchor_id}

web/components/layout.js

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

web/package-lock.json

@@ -14,6 +14,7 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
+    "eslint-plugin-react-hooks": "^4.0.7",
     "gatsby": "^2.20.12",
     "gatsby-plugin-typography": "^2.4.1",
     "gatsby-source-sanity": "^5.0.6",

web/package.json

@@ -1,30 +1,93 @@
-import React from 'react'
+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 ToC from '../../components/TableOfContents'
+import NavMenu from '../../components/NavMenu'
 import TopicSection from '../../components/TopicSection'
+import { styles } from 'prism-react-renderer/themes/oceanicNext'
+
+// TODO: add styles
+const SecondaryNavBar = styled.nav`
+
+`
+const NavMenuBtn = styled.button`
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  opacity: .7;
+  height: 50px;
+  /* width: 100%; */
+  background-color: rgb(255, 159, 128);
+  text-align: center;
+  border: none;
+  &:hover {
+    cursor: pointer;
+  }
+`
 
 export default function Index({ data }) {
-    console.log('Index data: ', data)
-    return (
-      <>
-        <Layout>
-            <ToC data={data.allSanitySection.edges} />
+  // these "nav" references are for the secondary nav that appears once you've scrolled past table of contents
+  const [navActive, setNavActive] = useState(false)
+  const [navMenuActive, toggleNavMenu] = useState(false)
+  // console.log('Index data: ', data)
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  function handleScroll() {
+    console.log('handleScroll')
+    // TODO: replace offset number with calculation that determines once ToC section has been passed
+    if (window.pageYOffset > 900) {
+      setNavActive(true)
+    } else {
+      setNavActive(false)
+    }
+  }
+
+  function handleNavMenuToggle() {
+    toggleNavMenu(navMenuActive ? false : true)
+  }
+
+  return (
+    <>
+      <Layout>
+          <ToC data={data.allSanitySection.edges} />
+          
+          {data.allSanitySection.edges.map(section => {
+            return (
+              <TopicSection 
+                section={section.node} 
+                key={section._id}
+              />
+            )
+          })}
+      </Layout>
+
+      {navActive && (
+        <SecondaryNavBar>
+          <NavMenuBtn 
+            id="navmenu_button"
+            onClick={handleNavMenuToggle}
+          >
+            Toggle Menu
+          </NavMenuBtn>
+        </SecondaryNavBar>
+      )}
 
-            {data.allSanitySection.edges.map(section => {
-              return (
-                <TopicSection 
-                  section={section.node} 
-                  key={section._id}
-                />
-              )
-            })}
-        </Layout>
+      {navMenuActive && (
+        <NavMenu data={data.allSanitySection.edges} />
+      )}
 
-        <Footer />
-      </>
-    )
+      <Footer />
+    </>
+  )
 }
 
 export const query = graphql`

web/src/pages/index.js

@@ -37,7 +37,7 @@ a {
 a:hover {
     /* text-decoration: underline; */
     /* color: rgb(144, 210, 245); */
-    border-bottom: 2px solid rgb(144, 210, 245);
+    border-bottom: 2px solid rgb(255, 159, 128);
 }
 
 header {
@@ -129,14 +129,14 @@ h2, h4, thead th {
 
 .description_container ul {
     background-color: rgb(235, 232, 232);
+    font-size: .9em;
 }
 
 .description_container li a {
     font-family: 'Work Sans', sans-serif;
 }
 
-.description_container li::before,
-.description_container li::after {
+.description_container li::before {
     content: ' \2022 ';
 }
 
@@ -238,6 +238,9 @@ footer span {
     line-height: 1.5;
 }
 
-/* @media screen and (max-width: 672px) {
-    
-} */
+@media screen and (max-width: 672px) {
+    body {
+        font-size: .8em;  
+    }
+  
+}