scroll currently viewed project into view

src/components/molecules/ProjectNav.jsx

@@ -1,48 +1,77 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import Img from 'gatsby-image'
 import FullWidth from '../atoms/FullWidth'
 import styles from './ProjectNav.module.scss'
 
-const ProjectItem = ({ title, slug, img }) => {
+const ProjectItem = ({ title, slug, img, current }) => (
-  return (
+  <div className={styles.item} id={current ? 'current' : null}>
-    <div className={styles.item}>
+    <Link className={styles.link} to={slug}>
-      <Link className={styles.link} to={slug}>
+      <Img
-        <Img
+        className={styles.image}
-          className={styles.image}
+        sizes={img.childImageSharp.sizes}
-          sizes={img.childImageSharp.sizes}
+        alt={title}
-          alt={title}
+      />
-        />
+      <h1 className={styles.title}>{title}</h1>
-        <h1 className={styles.title}>{title}</h1>
+    </Link>
-      </Link>
+  </div>
-    </div>
-  )
-}
-
-const ProjectNav = ({ projects }) => (
-  <FullWidth>
-    <nav className={styles.projectNav}>
-      {projects.map(({ node }) => (
-        <ProjectItem
-          key={node.slug}
-          title={node.title}
-          slug={node.slug}
-          img={node.img}
-        />
-      ))}
-    </nav>
-  </FullWidth>
 )
 
+class ProjectNav extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidUpdate() {
+    this.scrollToCurrent()
+  }
+
+  scrollToCurrent = () => {
+    const container = window.document.getElementById('scrollContainer')
+    const current = window.document.getElementById('current')
+    const currentLeft = current.getBoundingClientRect().left
+    const currentWidth = current.clientWidth
+    const finalPosition = currentLeft - window.innerWidth / 2 + currentWidth / 2
+
+    container.scrollLeft = finalPosition
+  }
+
+  render() {
+    const { projects, project } = this.props
+
+    return (
+      <FullWidth>
+        <nav className={styles.projectNav} id="scrollContainer">
+          {projects.map(({ node }) => {
+            const current = node.slug === project.slug
+
+            return (
+              <ProjectItem
+                key={node.slug}
+                title={node.title}
+                current={current}
+                slug={node.slug}
+                img={node.img}
+              />
+            )
+          })}
+        </nav>
+      </FullWidth>
+    )
+  }
+}
+
 ProjectItem.propTypes = {
+  current: PropTypes.bool,
   title: PropTypes.string,
   slug: PropTypes.string,
   img: PropTypes.object
 }
 
 ProjectNav.propTypes = {
-  projects: PropTypes.object
+  projects: PropTypes.array,
+  project: PropTypes.object
 }
 
 export default ProjectNav

src/components/molecules/ProjectNav.module.scss

@@ -1,9 +1,8 @@
 @import 'variables';
 
-$breakpoint-project-nav: 45rem;
-
 .projectNav {
     white-space: nowrap;
+    overflow-y: hidden;
     overflow-x: scroll;
     -webkit-overflow-scrolling: touch;
 
@@ -14,12 +13,8 @@ $breakpoint-project-nav: 45rem;
 
 .item {
     display: inline-block;
-    width: 45vw;
+    width: 40vw;
-    margin-left: $spacer;
+    margin-right: $spacer * 2;
-
-    &:last-child {
-        margin-right: $spacer * 2;
-    }
 }
 
 .image {

src/templates/Project.jsx

@@ -66,7 +66,7 @@ class Project extends Component {
           </Content>
         </article>
 
-        <ProjectNav projects={projects} />
+        <ProjectNav projects={projects} project={project} />
       </Fragment>
     )
   }