refactor projects nav into projects slider

src/components/molecules/ProjectNav.jsx

@@ -3,19 +3,12 @@ import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import Img from 'gatsby-image'
 import FullWidth from '../atoms/FullWidth'
-import { ReactComponent as Index } from '../../images/index.svg'
-
-import icons from '../atoms/Icons.module.scss'
 import styles from './ProjectNav.module.scss'
 
-const ProjectNavLink = ({ previous, next }) => {
-  const slug = previous ? previous.slug : next.slug
-  const title = previous ? previous.title : next.title
-  const img = previous ? previous.img : next.img
-
+const ProjectItem = ({ title, slug, img }) => {
   return (
     <div className={styles.item}>
-      <Link className={styles.link + ' prev'} to={slug}>
+      <Link className={styles.link} to={slug}>
         <Img
           className={styles.image}
           sizes={img.childImageSharp.sizes}
@@ -27,35 +20,29 @@ const ProjectNavLink = ({ previous, next }) => {
   )
 }
 
-const ProjectNav = ({ previous, next }) => (
+const ProjectNav = ({ projects }) => (
   <FullWidth>
     <nav className={styles.projectNav}>
-      {previous && <ProjectNavLink previous={previous} />}
-      <Link className={styles.index} title="Back to projects" to={'/'}>
-        <Index className={icons.icon} />
-      </Link>
-      {next ? (
-        <ProjectNavLink next={next} />
-      ) : (
-        <div className={`${styles.item} ${styles.itemEnd}`}>
-          <div className={styles.end}>
-            <h3>This is the end</h3>
-            <p>I would rather not show you my websites from 1999.</p>
-          </div>
-        </div>
-      )}
+      {projects.map(({ node }) => (
+        <ProjectItem
+          key={node.slug}
+          title={node.title}
+          slug={node.slug}
+          img={node.img}
+        />
+      ))}
     </nav>
   </FullWidth>
 )
 
-ProjectNavLink.propTypes = {
-  previous: PropTypes.object,
-  next: PropTypes.object
+ProjectItem.propTypes = {
+  title: PropTypes.string,
+  slug: PropTypes.string,
+  img: PropTypes.object
 }
 
 ProjectNav.propTypes = {
-  previous: PropTypes.object,
-  next: PropTypes.object
+  projects: PropTypes.object
 }
 
 export default ProjectNav

src/components/molecules/ProjectNav.module.scss

@@ -3,10 +3,23 @@
 $breakpoint-project-nav: 45rem;
 
 .projectNav {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    overflow: hidden;
+    white-space: nowrap;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.item {
+    display: inline-block;
+    width: 45vw;
+    margin-left: $spacer;
+
+    &:last-child {
+        margin-right: $spacer * 2;
+    }
 }
 
 .image {
@@ -20,48 +33,6 @@ $breakpoint-project-nav: 45rem;
     }
 }
 
-.item {
-    flex: 1 1 46%;
-    position: relative;
-    transition: .2s ease-out;
-    max-width: 500px;
-
-    &:first-child {
-        margin-right: $spacer / 2;
-
-        &:hover,
-        &:focus {
-            transform: translate3d(-.5rem, 0, 0);
-        }
-    }
-
-    /* stylelint-disable no-descending-specificity */
-    &:last-child {
-        margin-left: $spacer / 2;
-
-        &:hover,
-        &:focus {
-            transform: translate3d(.5rem, 0, 0);
-        }
-    }
-    /* stylelint-enable no-descending-specificity */
-
-    @media (min-width: $breakpoint-project-nav) {
-        flex-basis: 33%;
-
-        &:first-child,
-        &:last-child {
-            margin: 0;
-        }
-    }
-}
-
-.itemEnd {
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-}
-
 .title {
     visibility: hidden;
     font-size: 0;
@@ -70,69 +41,3 @@ $breakpoint-project-nav: 45rem;
 .link {
     display: block;
 }
-
-.index {
-    height: 100%;
-    display: block;
-    align-self: center;
-    margin-top: $spacer * 2;
-    margin-left: $spacer;
-    margin-right: $spacer;
-    transition: .2s ease-out;
-    order: 3;
-    width: 100%;
-
-    @media (min-width: $breakpoint-project-nav) {
-        margin-top: 0;
-        margin-left: $spacer * 4;
-        margin-right: $spacer * 4;
-        order: initial;
-        width: auto;
-    }
-
-    svg {
-        fill: $brand-grey-light;
-        width: 1.5rem;
-        height: 1.5rem;
-    }
-
-    &:hover,
-    &:focus {
-        svg {
-            fill: $brand-cyan;
-        }
-    }
-
-    &:first-child {
-        margin-left: 48.5%;
-    }
-
-    &:last-child {
-        margin-right: auto;
-    }
-}
-
-.end {
-    padding-right: $spacer;
-    text-align: left;
-
-    h3 {
-        font-size: $font-size-h4;
-        margin-bottom: $spacer / 4;
-        color: $brand-grey-light;
-
-        @media (min-width: $breakpoint-project-nav) {
-            font-size: $font-size-h3;
-        }
-    }
-
-    p {
-        margin: 0;
-        color: $brand-grey-light;
-        font-size: $font-size-small;
-
-        @media (min-width: $breakpoint-project-nav) {
-            font-size: $font-size-base;
-        }
-    }
-}

src/templates/Project.jsx

@@ -43,11 +43,10 @@ class Project extends Component {
 
   render() {
     const meta = this.props.data.dataYaml
+    const projects = this.props.data.allProjectsYaml.edges
     const project = this.props.data.projectsYaml
     const projectImages = this.props.data.projectImages.edges
-    const pathContext = this.props.pathContext
     const { title, links, techstack } = project
-    const { next, previous } = pathContext
 
     return (
       <Fragment>
@@ -67,7 +66,7 @@ class Project extends Component {
           </Content>
         </article>
 
-        <ProjectNav previous={previous} next={next} />
+        <ProjectNav projects={projects} />
       </Fragment>
     )
   }
@@ -90,7 +89,7 @@ Project.propTypes = {
 
 export default Project
 
-export const projectQuery = graphql`
+export const projectAndProjectsQuery = graphql`
   query ProjectBySlug($slug: String!) {
     projectsYaml(slug: { eq: $slug }) {
       title
@@ -136,6 +135,7 @@ export const projectQuery = graphql`
         }
       }
     }
+
     projectImages: allImageSharp(
       filter: { id: { regex: $slug } }
       sort: { fields: [id], order: ASC }
@@ -147,5 +147,19 @@ export const projectQuery = graphql`
         }
       }
     }
+
+    allProjectsYaml {
+      edges {
+        node {
+          title
+          slug
+          img {
+            childImageSharp {
+              ...ProjectImageSizes
+            }
+          }
+        }
+      }
+    }
   }
 `