refactor, simplify markup

src/components/molecules/ProjectNav.jsx

@@ -2,9 +2,19 @@ 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 ProjectLink = ({ node }) => (
+  <Link className={styles.link} to={node.slug}>
+    <Img
+      className={styles.image}
+      sizes={node.img.childImageSharp.sizes}
+      alt={node.title}
+    />
+    <h1 className={styles.title}>{node.title}</h1>
+  </Link>
+)
+
 class ProjectNav extends Component {
   constructor(props) {
     super(props)
@@ -33,41 +43,36 @@ class ProjectNav extends Component {
     const { projects, project } = this.props
 
     return (
-      <FullWidth>
-        <nav
-          className={styles.projectNav}
-          ref={node => {
-            this.scrollContainer = node
-          }}
-        >
-          {projects.map(({ node }) => {
-            const current = node.slug === project.slug
+      <nav
+        className={styles.projectNav}
+        ref={node => {
+          this.scrollContainer = node
+        }}
+      >
+        {projects.map(({ node }) => {
+          const current = node.slug === project.slug
 
-            return (
-              <div
-                className={styles.item}
-                key={node.slug}
-                ref={node => {
-                  if (current) this.currentItem = node
-                }}
-              >
-                <Link className={styles.link} to={node.slug}>
-                  <Img
-                    className={styles.image}
-                    sizes={node.img.childImageSharp.sizes}
-                    alt={node.title}
-                  />
-                  <h1 className={styles.title}>{node.title}</h1>
-                </Link>
-              </div>
-            )
-          })}
-        </nav>
-      </FullWidth>
+          return (
+            <div
+              className={styles.item}
+              key={node.slug}
+              ref={node => {
+                if (current) this.currentItem = node
+              }}
+            >
+              <ProjectLink node={node} />
+            </div>
+          )
+        })}
+      </nav>
     )
   }
 }
 
+ProjectLink.propTypes = {
+  node: PropTypes.object
+}
+
 ProjectNav.propTypes = {
   projects: PropTypes.array,
   project: PropTypes.object

src/components/molecules/ProjectNav.module.scss

@@ -1,6 +1,7 @@
 @import 'variables';
 
 .projectNav {
+    composes: fullWidth from '../atoms/FullWidth.module.scss';
     white-space: nowrap;
     overflow-y: hidden;
     overflow-x: scroll;