import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Link, graphql, StaticQuery } from 'gatsby'
import Img from 'gatsby-image'
import styles from './ProjectNav.module.scss'
const query = graphql`
query {
allProjectsYaml {
edges {
node {
title
slug
img {
childImageSharp {
fluid(maxWidth: 500, quality: 85) {
...GatsbyImageSharpFluid_noBase64
}
}
}
}
}
}
}
`
class ProjectLink extends PureComponent {
render() {
const { node } = this.props
return (
{node.title}
)
}
}
ProjectLink.propTypes = {
node: PropTypes.object
}
export default class ProjectNav extends PureComponent {
state = {
scrolledToCurrent: false
}
componentDidMount() {
// this.scrollToCurrent()
this.setState({ scrolledToCurrent: true })
}
componentDidUpdate() {
// this.scrollToCurrent()
}
componentWillUnmount() {
this.setState({ scrolledToCurrent: false })
}
scrollToCurrent = () => {
const current = this.currentItem
const currentLeft = current.getBoundingClientRect().left
const currentWidth = current.clientWidth
const finalPosition = currentLeft - window.innerWidth / 2 + currentWidth / 2
this.scrollContainer.scrollLeft += finalPosition
}
Project({ node }) {
// const current = node.slug === slug
return (
current && (this.currentItem = node)}
>
)
}
render() {
const { slug } = this.props
return (
{
const projects = data.allProjectsYaml.edges
return (
)
}}
/>
)
}
}
ProjectNav.propTypes = {
slug: PropTypes.string
}