scroll currently viewed project into view

src/components/molecules/ProjectNav.jsx

@@ -1,13 +1,12 @@
-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 }) => {
-  return (
-    <div className={styles.item}>
+const ProjectItem = ({ title, slug, img, current }) => (
+  <div className={styles.item} id={current ? 'current' : null}>
     <Link className={styles.link} to={slug}>
       <Img
         className={styles.image}
@@ -18,31 +17,61 @@ const ProjectItem = ({ title, slug, img }) => {
     </Link>
   </div>
 )
+
+class ProjectNav extends Component {
+  constructor(props) {
+    super(props)
   }
 
-const ProjectNav = ({ projects }) => (
+  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}>
-      {projects.map(({ node }) => (
+        <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,13 +13,9 @@ $breakpoint-project-nav: 45rem;
 
 .item {
     display: inline-block;
-    width: 45vw;
-    margin-left: $spacer;
-
-    &:last-child {
+    width: 40vw;
     margin-right: $spacer * 2;
 }
-}
 
 .image {
     margin: 0;

src/templates/Project.jsx

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