2018-09-14 20:22:57 +02:00
|
|
|
import React, { PureComponent, Fragment } from 'react'
|
2018-06-13 20:46:36 +02:00
|
|
|
import PropTypes from 'prop-types'
|
2018-09-14 20:22:57 +02:00
|
|
|
import posed, { PoseGroup } from 'react-pose'
|
2018-09-14 20:58:49 +02:00
|
|
|
import { fadeIn } from './atoms/Transitions'
|
2018-07-18 21:00:50 +02:00
|
|
|
import Head from './molecules/Head'
|
2018-06-13 20:46:36 +02:00
|
|
|
import Header from './organisms/Header'
|
|
|
|
|
import Footer from './organisms/Footer'
|
2018-06-23 15:50:02 +02:00
|
|
|
import styles from './Layout.module.scss'
|
2018-06-13 20:46:36 +02:00
|
|
|
|
2018-09-14 20:58:49 +02:00
|
|
|
const timeout = 250
|
2018-06-13 20:46:36 +02:00
|
|
|
|
2018-09-14 20:22:57 +02:00
|
|
|
export default class Layout extends PureComponent {
|
|
|
|
|
static propTypes = {
|
|
|
|
|
children: PropTypes.any.isRequired,
|
|
|
|
|
location: PropTypes.object.isRequired
|
|
|
|
|
}
|
2018-06-13 20:46:36 +02:00
|
|
|
|
2018-09-14 20:22:57 +02:00
|
|
|
render() {
|
|
|
|
|
const { children, location } = this.props
|
|
|
|
|
const isHomepage = location.pathname === '/'
|
2018-06-13 20:46:36 +02:00
|
|
|
|
2018-09-14 20:58:49 +02:00
|
|
|
const RoutesContainer = posed.div(fadeIn)
|
2018-06-13 20:46:36 +02:00
|
|
|
|
2018-09-14 20:22:57 +02:00
|
|
|
return (
|
|
|
|
|
<Fragment>
|
|
|
|
|
<Head />
|
|
|
|
|
<PoseGroup animateOnMount={true}>
|
2018-09-14 20:58:49 +02:00
|
|
|
<RoutesContainer
|
|
|
|
|
key={location.pathname}
|
|
|
|
|
delay={timeout}
|
|
|
|
|
delayChildren={timeout}
|
|
|
|
|
>
|
2018-09-19 19:50:41 +02:00
|
|
|
<Header minimal={!isHomepage} />
|
2018-09-14 20:22:57 +02:00
|
|
|
<main className={styles.screen}>{children}</main>
|
|
|
|
|
</RoutesContainer>
|
|
|
|
|
</PoseGroup>
|
|
|
|
|
<Footer />
|
|
|
|
|
</Fragment>
|
|
|
|
|
)
|
|
|
|
|
}
|
2018-06-13 20:46:36 +02:00
|
|
|
}
|
