m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-01-03 10:25:00 +01:00
Code Releases Activity

project nav fixes

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-03-29 23:43:40 +01:00
parent 47e00e805c
commit f2cb601473
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 26 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/molecules/ProjectNav.jsx
View File

@ -24,32 +24,6 @@ const query = graphql`
}
`
class Project extends PureComponent {
static propTypes = {
node: PropTypes.object.isRequired,
currentSlug: PropTypes.string.isRequired,
refCurrentItem: PropTypes.any
}
render() {
const { node, currentSlug, refCurrentItem } = this.props
const isCurrent = node.slug === currentSlug
return (
<div className={styles.item} ref={isCurrent ? refCurrentItem : null}>
<Link className={styles.link} to={node.slug}>
<Img
className={styles.image}
fluid={node.img.childImageSharp.fluid}
alt={node.title}
/>
<h1 className={styles.title}>{node.title}</h1>
</Link>
</div>
)
}
}
export default class ProjectNav extends PureComponent {
static propTypes = {
currentSlug: PropTypes.string.isRequired
@ -82,18 +56,26 @@ export default class ProjectNav extends PureComponent {
activeRect.width / 2
scrollContainer.scrollLeft += this.state.scrollLeftPosition
this.setState(state => {
return {
...state,
scrollLeftPosition
this.setState({ scrollLeftPosition })
}
})
Project({ node, refCurrentItem }) {
return (
<div className={styles.item} ref={refCurrentItem}>
<Link className={styles.link} to={node.slug}>
<Img
className={styles.image}
fluid={node.img.childImageSharp.fluid}
alt={node.title}
/>
<h1 className={styles.title}>{node.title}</h1>
</Link>
</div>
)
}
render() {
const { currentSlug } = this.props
return (
<StaticQuery
query={query}
@ -102,14 +84,17 @@ export default class ProjectNav extends PureComponent {
return (
<nav className={styles.projectNav} ref={this.scrollContainer}>
{projects.map(({ node }) => (
<Project
key={node.id}
{projects.map(({ node }) => {
const isCurrent = node.slug === currentSlug
return (
<this.Project
key={node.slug}
node={node}
currentSlug={currentSlug}
refCurrentItem={this.currentItem}
refCurrentItem={isCurrent ? this.currentItem : null}
/>
))}
)
})}
</nav>
)
}}