import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link, graphql, StaticQuery } from 'gatsby'
import Img from 'gatsby-image'
import FullWidth from '../atoms/FullWidth'
import styles from './ProjectNav.module.scss'
const ProjectLink = ({ node }) => (
{node.title}
)
class ProjectNav extends Component {
constructor(props) {
super(props)
this.state = {
scrolledToCurrent: false
}
this.scrollToCurrent = this.scrollToCurrent.bind(this)
}
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
}
render() {
const { slug } = this.props
return (
{
const projects = data.allProjectsYaml.edges
return (
)
}}
/>
)
}
}
ProjectLink.propTypes = {
node: PropTypes.object
}
ProjectNav.propTypes = {
slug: PropTypes.string
}
export default ProjectNav