64 lines
1.5 KiB
JavaScript
64 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import { Link } from 'gatsby'
|
|
import logo from '../img/logo/logo-s.svg'
|
|
|
|
export default class Navbar extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
showNav: false,
|
|
headerSize: 200,
|
|
}
|
|
this.resizeHeader = this.resizeHeader.bind(this)
|
|
}
|
|
|
|
componentDidMount() {
|
|
window.addEventListener('scroll', this.resizeHeader)
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
window.removeEventListener('scroll', this.resizeHeader)
|
|
}
|
|
|
|
toggleNav() {
|
|
this.setState({
|
|
showNav: !this.state.showNav,
|
|
})
|
|
}
|
|
|
|
resizeHeader() {
|
|
if (window.scrollY < 160) {
|
|
this.setState({
|
|
headerSize: 200 - window.scrollY,
|
|
})
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<header
|
|
className={`site-header ${
|
|
this.state.showNav ? 'site-nav-visible' : ''
|
|
}`}
|
|
>
|
|
<nav className="site-nav">
|
|
<Link to="/program/">Program</Link>
|
|
<Link to="/nyheter/">Nyheter</Link>
|
|
<Link to="/om-dns/">Praktisk</Link>
|
|
</nav>
|
|
<Link to="/" className="logo">
|
|
<img src={logo} alt="Det Norske Studentersamfund" />
|
|
</Link>
|
|
<nav className="site-nav">
|
|
<Link to="/om-dns/">Om oss</Link>
|
|
<Link to="/foreningene/">Foreningene</Link>
|
|
<Link to="/booking/">Utleie</Link>
|
|
</nav>
|
|
<div className="site-nav_toggle" onClick={this.toggleNav.bind(this)}>
|
|
=
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
}
|