text: import Nav from './Nav'
  import Link from 'next/link'
  import React from 'react'
  import styled from 'styled-components'
  import Router from 'next/router'
  import NProgress from 'nprogress'
  import Cart from './Cart'
  import Search from './Search'
  
  Router.onRouteChangeStart = () => {
      console.log('onRouteChangeStart')
      NProgress.start()
  }
  Router.onRouteChangeComplete = () => {
      console.log('onRouteChangeComplete')
      NProgress.done()
  }
  Router.onRouteChangeError = () => {
      console.log('onRouteChangeError')
      NProgress.done()
  }
  
  const Logo = styled.h1`
    font-size: 4rem;
    margin-left: 2rem;
    position:relative;
    z-index: 2;
    transform: skew(-7deg);
    a {
      padding: 0.5rem 1rem;
      background-color: ${props => props.theme.red};
      color: #fff;
      text-transform: uppercase;
      text-decoration: none;
    }
    
    @media (max-width: 1300px) {
      margin: 0;
      text-align: center;
    }
  `
  
  const StyledHeader = styled.header`
    .bar {
      border-bottom: 10px solid ${props => props.theme.black};
      display: grid;
      grid-template-columns: auto 1fr;
      justify-content: space-between;
      align-items: stretch;
      
      @media (max-width: 1300px) {
            grid-template-columns:1fr;
            justify-content: center;
      }
    }
    
    .sub-bar {
      display: grid;
      grid-template-columns: 1fr auto;
      border-bottom: 1px solid ${props => props.theme.lightGrey} ;
      
    }
  `
  
  const Header = () => {
      return (
          <StyledHeader>
              <div className="bar">
                  <Logo>
                      <Link href="/">
                          <a>fits</a>
                      </Link>
                  </Logo>
                  <Nav />
              </div>
              <div className="sub-bar">
                  <Search/>
              </div>
              <Cart/>
          </StyledHeader>
      )
  }
  
  export default Header
  