2018-07-05 14:41:18 +02:00
|
|
|
import * as React from 'react'
|
2018-07-31 21:04:14 +02:00
|
|
|
import Router, { withRouter } from 'next/router'
|
2018-07-05 14:41:18 +02:00
|
|
|
import Link from 'next/link'
|
|
|
|
|
|
|
|
const pages = {
|
|
|
|
'/a': 'Foo',
|
|
|
|
'/b': 'Bar'
|
|
|
|
}
|
|
|
|
|
|
|
|
class HeaderNav extends React.Component {
|
|
|
|
constructor ({ router }) {
|
|
|
|
super()
|
|
|
|
|
|
|
|
this.state = {
|
2018-07-31 21:04:14 +02:00
|
|
|
activeURL: router.asPath,
|
|
|
|
activeURLTopLevelRouterDeprecatedBehavior: router.asPath,
|
|
|
|
activeURLTopLevelRouter: router.asPath
|
2018-07-05 14:41:18 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount () {
|
2018-07-31 21:04:14 +02:00
|
|
|
Router.onRouteChangeComplete = this.handleRouteChangeTopLevelRouterDeprecatedBehavior
|
2019-05-30 03:19:32 +02:00
|
|
|
Router.events.on(
|
|
|
|
'routeChangeComplete',
|
|
|
|
this.handleRouteChangeTopLevelRouter
|
|
|
|
)
|
2018-07-05 14:41:18 +02:00
|
|
|
this.props.router.events.on('routeChangeComplete', this.handleRouteChange)
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount () {
|
2018-07-31 21:04:14 +02:00
|
|
|
Router.onRouteChangeComplete = null
|
2019-05-30 03:19:32 +02:00
|
|
|
Router.events.off(
|
|
|
|
'routeChangeComplete',
|
|
|
|
this.handleRouteChangeTopLevelRouter
|
|
|
|
)
|
2018-07-05 14:41:18 +02:00
|
|
|
this.props.router.events.off('routeChangeComplete', this.handleRouteChange)
|
|
|
|
}
|
|
|
|
|
2018-08-07 05:53:06 +02:00
|
|
|
handleRouteChange = url => {
|
2018-07-31 21:04:14 +02:00
|
|
|
this.setState({
|
2018-08-07 05:53:06 +02:00
|
|
|
activeURL: url
|
2018-07-31 21:04:14 +02:00
|
|
|
})
|
2019-05-30 03:19:32 +02:00
|
|
|
}
|
2018-07-31 21:04:14 +02:00
|
|
|
|
2018-08-07 05:20:01 +02:00
|
|
|
handleRouteChangeTopLevelRouter = url => {
|
2018-07-31 21:04:14 +02:00
|
|
|
this.setState({
|
|
|
|
activeURLTopLevelRouter: url
|
|
|
|
})
|
2019-05-30 03:19:32 +02:00
|
|
|
}
|
2018-07-31 21:04:14 +02:00
|
|
|
|
2018-08-07 05:53:06 +02:00
|
|
|
handleRouteChangeTopLevelRouterDeprecatedBehavior = url => {
|
2018-07-05 14:41:18 +02:00
|
|
|
this.setState({
|
2018-08-07 05:53:06 +02:00
|
|
|
activeURLTopLevelRouterDeprecatedBehavior: url
|
2018-07-05 14:41:18 +02:00
|
|
|
})
|
2019-05-30 03:19:32 +02:00
|
|
|
}
|
2018-07-05 14:41:18 +02:00
|
|
|
|
|
|
|
render () {
|
|
|
|
return (
|
|
|
|
<nav>
|
2019-05-30 03:19:32 +02:00
|
|
|
{Object.keys(pages).map(url => (
|
|
|
|
<Link href={url} key={url} prefetch>
|
|
|
|
<a
|
|
|
|
className={`${this.state.activeURL === url ? 'active' : ''} ${
|
|
|
|
this.state.activeURLTopLevelRouter === url
|
|
|
|
? 'active-top-level-router'
|
|
|
|
: ''
|
|
|
|
} ${
|
|
|
|
this.state.activeURLTopLevelRouterDeprecatedBehavior === url
|
|
|
|
? 'active-top-level-router-deprecated-behavior'
|
|
|
|
: ''
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
{pages[url]}
|
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
))}
|
2018-07-05 14:41:18 +02:00
|
|
|
</nav>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default withRouter(HeaderNav)
|