make happy clumsy responsive header 🐯

src/components/Navbar.js

@@ -1,14 +1,23 @@
 import React from 'react'
 import { Link, StaticQuery, graphql } from 'gatsby'
 import github from '../img/github-icon.svg'
-import logo from '../img/logo/logo-xl.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() {
@@ -17,31 +26,35 @@ export default class Navbar extends React.Component {
     })
   }
 
+  resizeHeader() {
+    console.log(this.state.headerSize)
+    if (window.scrollY < 160) {
+      this.setState({
+        headerSize: 200 - window.scrollY,
+      })
+    }
+  }
+
   render() {
     return (
       <header
-        className={`site-header ${
-          this.state.showNav ? 'site-nav-visible' : ''
-        }`}
+        className={`site-header ${this.state.showNav ? 'site-nav-visible' : ''}`}
+        style={{ height: `${ this.state.headerSize }px` }}
       >
         <nav className="site-nav">
           <Link to="/program/">Program</Link>
           <Link to="/nyheter/">Nyheter</Link>
           <Link to="/om-dns/">Praktisk</Link>
         </nav>
-        <div className="logo">
-          <Link to="/">
-            <img src={logo} alt="Det Norske Studentersamfund" />
-          </Link>
-        </div>
+        <Link to="/" className="logo" style={{ width: `${ this.state.headerSize }px`, height: `${ this.state.headerSize }px` }}></Link>
         <nav className="site-nav">
           <Link to="/om-dns/">Om oss</Link>
           <Link to="/foreningene/">Foreningene</Link>
           <Link to="/booking/">Utleie</Link>
-          <div className="site-nav_toggle" onClick={this.toggleNav.bind(this)}>
-            =
-          </div>
         </nav>
+        <div className="site-nav_toggle" onClick={this.toggleNav.bind(this)}>
+          =
+        </div>
       </header>
     )
   }