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,7 +43,6 @@ class ProjectNav extends Component {
     const { projects, project } = this.props
 
     return (
-      <FullWidth>
       <nav
         className={styles.projectNav}
         ref={node => {
@@ -51,23 +60,19 @@ class ProjectNav extends Component {
                 if (current) this.currentItem = node
               }}
             >
-                <Link className={styles.link} to={node.slug}>
+              <ProjectLink node={node} />
-                  <Img
-                    className={styles.image}
-                    sizes={node.img.childImageSharp.sizes}
-                    alt={node.title}
-                  />
-                  <h1 className={styles.title}>{node.title}</h1>
-                </Link>
             </div>
           )
         })}
       </nav>
-      </FullWidth>
     )
   }
 }
 
+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;