import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Link from 'gatsby-link'
import Img from 'gatsby-image'
import FullWidth from '../atoms/FullWidth'
import styles from './ProjectNav.module.scss'
const ProjectItem = ({ title, slug, img, current }) => (
{title}
)
class ProjectNav extends Component {
constructor(props) {
super(props)
}
componentDidUpdate() {
this.scrollToCurrent()
}
scrollToCurrent = () => {
const container = window.document.getElementById('scrollContainer')
const current = window.document.getElementById('current')
const currentLeft = current.getBoundingClientRect().left
const currentWidth = current.clientWidth
const finalPosition = currentLeft - window.innerWidth / 2 + currentWidth / 2
container.scrollLeft = finalPosition
}
render() {
const { projects, project } = this.props
return (
{projects.map(({ node }) => {
const current = node.slug === project.slug
return (
)
})}
)
}
}
ProjectItem.propTypes = {
current: PropTypes.bool,
title: PropTypes.string,
slug: PropTypes.string,
img: PropTypes.object
}
ProjectNav.propTypes = {
projects: PropTypes.array,
project: PropTypes.object
}
export default ProjectNav