project nav refactor

src/components/Layout.module.css

@@ -23,6 +23,7 @@
   grid-column: main;
 }
 
+/* Projects Grid */
 .grid {
   display: grid;
   gap: calc(var(--spacer) * 2);
@@ -31,6 +32,7 @@
 
 @media (min-width: 55rem) {
   .grid {
+    gap: calc(var(--spacer) * 3);
     grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
   }
 }

src/components/atoms/ProjectImage.jsx

@@ -33,3 +33,9 @@ export const projectImageTeaser = graphql`
     gatsbyImageData(layout: CONSTRAINED, width: 740, quality: 85)
   }
 `
+
+export const projectImageNav = graphql`
+  fragment ProjectImageNav on ImageSharp {
+    gatsbyImageData(layout: CONSTRAINED, width: 500, quality: 85)
+  }
+`

src/components/molecules/ProjectNav.jsx

@@ -1,9 +1,8 @@
-import React, { PureComponent } from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { Link, graphql, StaticQuery } from 'gatsby'
+import { Link, graphql, useStaticQuery } from 'gatsby'
-import shortid from 'shortid'
 import ProjectImage from '../atoms/ProjectImage'
-import { item, link, title, projectNav } from './ProjectNav.module.css'
+import { item, projectNav } from './ProjectNav.module.css'
 
 const query = graphql`
   query {
@@ -14,7 +13,7 @@ const query = graphql`
           slug
           img {
             childImageSharp {
-              gatsbyImageData(layout: CONSTRAINED, width: 500, quality: 85)
+              ...ProjectImageNav
             }
           }
         }
@@ -24,15 +23,12 @@ const query = graphql`
 `
 
 const Project = ({ node, refCurrentItem }) => (
-  <div className={item} ref={refCurrentItem}>
+  <Link className={item} to={node.slug} title={node.title} ref={refCurrentItem}>
-    <Link className={link} to={node.slug}>
+    <ProjectImage
-      <ProjectImage
+      image={node.img.childImageSharp.gatsbyImageData}
-        image={node.img.childImageSharp.gatsbyImageData}
+      alt={node.title}
-        alt={node.title}
+    />
-      />
+  </Link>
-      <h1 className={title}>{node.title}</h1>
-    </Link>
-  </div>
 )
 
 Project.propTypes = {
@@ -40,67 +36,50 @@ Project.propTypes = {
   refCurrentItem: PropTypes.any
 }
 
-export default class ProjectNav extends PureComponent {
+export default function ProjectNav({ currentSlug }) {
-  static propTypes = {
+  const data = useStaticQuery(query)
-    currentSlug: PropTypes.string.isRequired
+  const projects = data.allProjectsYaml.edges
-  }
 
-  state = {
+  // Always keep the scroll position centered
-    scrollLeftPosition: 0
+  // to currently viewed project on mount.
-  }
+  const scrollContainer = React.createRef()
+  const currentItem = React.createRef()
 
-  scrollContainer = React.createRef()
+  function scrollToCurrent() {
-  currentItem = React.createRef()
+    const activeItem = currentItem.current
-
+    const scrollRect = scrollContainer.current.getBoundingClientRect()
-  componentDidMount() {
-    this.scrollToCurrent()
-  }
-
-  componentDidUpdate() {
-    this.scrollToCurrent()
-  }
-
-  scrollToCurrent = () => {
-    const scrollContainer = this.scrollContainer.current
-    const activeItem = this.currentItem.current
-    const scrollRect = scrollContainer.getBoundingClientRect()
     const activeRect = activeItem && activeItem.getBoundingClientRect()
-    const scrollLeftPosition =
+    const newScrollLeftPosition =
       activeRect &&
       activeRect.left -
         scrollRect.left -
         scrollRect.width / 2 +
         activeRect.width / 2
 
-    scrollContainer.scrollLeft += this.state.scrollLeftPosition
+    scrollContainer.current.scrollLeft += newScrollLeftPosition
-    this.setState({ scrollLeftPosition })
   }
 
-  render() {
+  useEffect(() => {
-    const { currentSlug } = this.props
+    scrollToCurrent()
-    return (
+  }, [])
-      <StaticQuery
-        query={query}
-        render={(data) => {
-          const projects = data.allProjectsYaml.edges
 
-          return (
+  return (
-            <nav className={projectNav} ref={this.scrollContainer}>
+    <nav className={projectNav} ref={scrollContainer}>
-              {projects.map(({ node }) => {
+      {projects.map(({ node }) => {
-                const isCurrent = node.slug === currentSlug
+        const isCurrent = node.slug === currentSlug
 
-                return (
+        return (
-                  <Project
+          <Project
-                    key={shortid.generate()}
+            key={node.slug}
-                    node={node}
+            node={node}
-                    refCurrentItem={isCurrent ? this.currentItem : null}
+            refCurrentItem={isCurrent ? currentItem : null}
-                  />
+          />
-                )
+        )
-              })}
+      })}
-            </nav>
+    </nav>
-          )
+  )
-        }}
+}
-      />
+
-    )
+ProjectNav.propTypes = {
-  }
+  currentSlug: PropTypes.string.isRequired
 }

src/components/molecules/ProjectNav.module.css

@@ -4,6 +4,7 @@
   overflow-y: hidden;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
+  padding-bottom: var(--spacer);
 }
 
 .projectNav::-webkit-scrollbar,
@@ -17,7 +18,7 @@
 }
 
 .projectNav::-webkit-scrollbar-thumb {
-  background: var(--brand-grey-dimmed);
+  background: var(--text-color);
 }
 
 .projectNav::-webkit-scrollbar-track {
@@ -41,12 +42,3 @@
     margin-left: calc(var(--spacer) * 2);
   }
 }
-
-.title {
-  visibility: hidden;
-  font-size: 0;
-}
-
-.link {
-  display: block;
-}