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>
     )
   }

src/css/base.scss

@@ -12,13 +12,13 @@ html {
 
 body {
   min-height: 100%;
-  margin: 3rem 0 0;
+  margin: 14rem 0 0;
   padding: 0;
   background: $color-background;
   color: $color-text;
-
-  border-left: 2rem solid $color-black;
-  border-right: 2rem solid $color-black;
+/*
+  border-left: 1rem solid $color-black;
+  border-right: 1rem solid $color-black;
   &:after {
     content: " ";
     display: block;
@@ -27,7 +27,14 @@ body {
     right: 0;
     left: 0;
     background: $color-black;
-    height: 2rem;
+    height: 1rem;
+  }*/
+
+  @media (max-width: $media-s) {
+    border: none;
+    &:after {
+      display: none;
+    }
   }
 
   font-family: $sans-serif;
@@ -41,6 +48,10 @@ main {
 
 section {
   padding: 2rem 2rem 6rem;
+
+  @media (max-width: $media-s) {
+    padding: 1rem 1rem 3rem;
+  }
 }
 
 a {

src/css/header.scss

@@ -1,5 +1,5 @@
 .site-header {
-  padding: 1rem 2rem;
+  padding: 1rem;
   background: $color-black;
   color: $color-white;
   display: flex;
@@ -10,14 +10,21 @@
   left: 0;
   right: 0;
   z-index: 10;
-  height: 3rem;
 
   .logo {
-    width: 3rem;
+    width: 6rem;
+    height: 6rem;
     margin: 0 3rem;
-  
-    a {
-      display: block;
+    background: url('../img/logo/logo-xxl.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  &.large {
+    .logo {
+      width: 12rem;
+      height: 12rem;
     }
   }
 }
@@ -52,7 +59,7 @@
   }
   &_toggle {
     position: fixed;
-    top: 1rem;
+    top: 0;
     right: 2rem;
     font-size: 3rem;
     transform: translateX(3em);
@@ -67,22 +74,45 @@
 
 @media (max-width: $media-s) {
   .site-header {
-    display: block;
-  }
-  .logo {
-    margin: 1rem auto;
+    display: flex;
+    flex-direction: column;
+    height: 6rem;
+
+    .logo {
+      order: 1;
+      margin: 0;
+      width: 6rem;
+      height: 6rem;
+      background: url('../img/logo/logo-s.svg');
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
   }
   .site-nav {
-    display: block;
+    display: none;
     text-align: center;
     margin-top: 3rem;
     a {
       display: block;
       margin: 1.2rem 0;
       font-size: 1rem;
+      &:hover {
+        box-shadow: none;
+      }
     }
     &_toggle {
       transform: translateX(0);
     }
+    order: 2;
+    &:last-of-type {
+      order: 3;
+    }
+  }
+  .site-nav-visible {
+    height: 100%;
+    .site-nav {
+      display: block;
+    }
+
   }
 }