import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import Img from 'gatsby-image'
import styles from './ProjectNav.module.scss'
const ProjectLink = ({ node }) => (
{node.title}
)
class ProjectNav extends Component {
constructor(props) {
super(props)
this.scrollToCurrent = this.scrollToCurrent.bind(this)
}
componentDidMount() {
this.scrollToCurrent()
}
componentDidUpdate() {
this.scrollToCurrent()
}
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 { projects, project } = this.props
return (
)
}
}
ProjectLink.propTypes = {
node: PropTypes.object
}
ProjectNav.propTypes = {
projects: PropTypes.array,
project: PropTypes.object
}
export default ProjectNav