WIP on the new navigation bar:

package.json

@@ -6,21 +6,22 @@
   "author": "Ryan Wiemer <ryan@ryanwiemer.com>",
   "dependencies": {
     "dotenv": "^5.0.1",
-    "gatsby": "^1.9.252",
+    "gatsby": "^1.9.253",
     "gatsby-cli": "^1.1.50",
-    "gatsby-image": "^1.0.46",
-    "gatsby-link": "^1.6.40",
-    "gatsby-plugin-canonical-urls": "^1.0.17",
-    "gatsby-plugin-google-analytics": "^1.0.30",
+    "gatsby-image": "^1.0.47",
+    "gatsby-link": "^1.6.41",
+    "gatsby-plugin-canonical-urls": "^1.0.18",
+    "gatsby-plugin-google-analytics": "^1.0.31",
     "gatsby-plugin-netlify": "^1.0.19",
     "gatsby-plugin-nprogress": "^1.0.14",
-    "gatsby-plugin-react-helmet": "^2.0.10",
+    "gatsby-plugin-react-helmet": "^2.0.11",
     "gatsby-plugin-react-next": "^1.0.11",
     "gatsby-plugin-styled-components": "^2.0.11",
-    "gatsby-source-contentful": "^1.3.46",
+    "gatsby-source-contentful": "^1.3.47",
     "gatsby-source-filesystem": "^1.5.33",
     "gatsby-transformer-remark": "^1.7.40",
     "react-helmet": "^5.2.0",
+    "react-scrollspy": "^3.3.5",
     "smoothscroll-polyfill": "^0.4.3",
     "styled-components": "3.2.6"
   },

src/components/Container.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Wrapper = styled.section`
+  @media screen and (min-width: ${props => props.theme.responsive.small}) {
+      margin: 0 0 0 4em;
+  }
+`;
+
+const Container = (props) => {
+  return (
+    <Wrapper>
+      {props.children}
+    </Wrapper>
+  )
+}
+
+export default Container

src/components/Hero.js

@@ -49,24 +49,27 @@ const Logo = styled.div`
 `
 
 const LinkList = styled.ul`
-  width: 100%;
+  background: white;
+  height: 100%;
   text-align: center;
   z-index: 99;
-  position: absolute;
-  bottom: 2em;
-  @media screen and (min-width: ${props => props.theme.responsive.medium}) {
-    bottom: 2.5em;
-    font-size: 1.25em;
-  }
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  display: flex;
+  transform: rotate(-90deg) translateX(-100%);
+  transform-origin: left top;
+  border-bottom: 1px solid ${props => props.theme.colors.tertiary};
+  height: 4em;
+  display: none;
   li {
     display: inline-block;
     margin: 0 .5em;
   }
 `
 
 const ScrollLink = styled.button`
-  text-decoration: underline;
-  color: white;
   font-weight: bold;
   opacity: 1;
   transition: .3s;

src/components/Nav.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import styled from 'styled-components'
+import Link from 'gatsby-link'
+import Scrollspy from 'react-scrollspy'
+
+const Wrapper = styled.nav`
+  display: none;
+  @media screen and (min-width: ${props => props.theme.responsive.small}) {
+    background: white;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: block;
+    z-index: 99;
+    width: 100vh;
+    transform-origin: left top;
+    transform: rotate(-90deg) translateX(-100%);
+    border-bottom: 1px solid ${props => props.theme.colors.tertiary};
+    }
+`;
+
+const List = styled(Scrollspy)`
+  height: 4em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: row-reverse;
+`;
+
+const ScrollLink = styled.a`
+    font-size: 1.25em;
+    font-weight: bold;
+    margin: 0 1rem;
+    text-decoration: none;
+`;
+
+
+const scrollTo = (e) => {
+  document.querySelector('.' + e.target.id ).scrollIntoView({
+    behavior: 'smooth',
+    block: 'start'
+  });
+}
+
+const Nav = (props) => {
+  return (
+    <Wrapper>
+      <List>
+        <List items={props.links.slug} currentClassName="is-active" offset={0}>
+          {props.links && (
+            props.links.map((link) => (
+              <li key={link.id}>
+                <ScrollLink href={`#${link.slug}`}>{link.title}</ScrollLink>
+              </li>
+            ))
+          )}
+          <li>
+            <ScrollLink href="#register">Register</ScrollLink>
+          </li>
+        </List>
+      </List>
+    </Wrapper>
+  )
+}
+
+export default Nav

src/pages/index.js

@@ -7,9 +7,8 @@ import styled from 'styled-components'
 import Modules from '../components/Modules'
 import SignUp from '../components/SignUp'
 import Footer from '../components/Footer'
-
-const Wrapper = styled.div`
-`;
+import Nav from '../components/Nav'
+import Container from '../components/Container'
 
 const Section = styled.section`
   position: relative;
@@ -31,26 +30,36 @@ const Title = styled.h2`
 const IndexPage = ({data}) =>  {
 
   const sections = data.allContentfulSection.edges;
+  const navigation = data.contentfulNavigation;
 
   return (
-    <Wrapper>
+    <Container>
+      <Nav links={navigation.links}/>
       {sections.map(({node: section}) => (
-        <Section key={section.id} className={section.slug}>
+        <Section key={section.id} id={section.slug}>
           {section.heading && (<Title>{section.heading}</Title>)}
           <Modules modules={section.modules} />
         </Section>
       ))}
-      <Section className="sign-up">
-        <Title>Sign Up</Title>
+      <Section id="register">
+        <Title>Register</Title>
         <SignUp/>
       </Section>
       <Footer/>
-    </Wrapper>
+    </Container>
   )
 }
 
 export const query = graphql`
 query Index {
+  contentfulNavigation {
+        title
+        links {
+          title
+          id
+          slug
+        }
+      }
   allContentfulSection(sort: { fields: [sortOrder], order: ASC }) {
     edges {
       node {
@@ -63,6 +72,7 @@ query Index {
           __typename
           ... on ContentfulHero {
             title
+            heading
             image {
               title
               sizes(maxWidth: 1800) {

src/styles/global.js

@@ -68,7 +68,7 @@ injectGlobal`
   /* Site Specific Globals */
   body {
     background: white;
-    color: #282828;
+    color: #434343;
   }
 
   img {

src/styles/theme.js

@@ -1,8 +1,8 @@
 const theme = {
   colors: {
-    base: '#3E3F3A', // Dark Gray
-    secondary: '#ededeb', // Light Gray
-    tertiary: '#D1CFCB' // Medium Gray
+    base: '#4a4a4a', // Dark Gray
+    secondary: '#f5efe9', // Light Gray
+    tertiary: '#e0dcd7' // Medium Gray
   },
   sizes: {
     maxWidth: '1200px'