AutoMate/frontend/components/Header.js

import Link from 'next/link'
import styled from 'styled-components'
import Router from 'next/router'
import NProgress from 'nprogress'

Router.onRouteChangeStart = () => {
  NProgress.start()
}
Router.onRouteChangeComplete = () => {
  NProgress.done()
}
Router.onRouteChangeError = () => {
  NProgress.done()
}

const StyledHeader = styled.header`
display: grid;
grid-template-columns: 250px 1fr;
grid-auto-flow: column;
border-bottom: 1px solid ${props => props.theme.darkerblue};
box-shadow: 0 10px 5px -5px rgba(0,0,0,0.09);

#logo {
  font-family: 'roboto_black';
  margin: 0;
  padding: 0.4em 0;
  font-size: 180%;
  line-height: 1;
  text-align: center;
}

#logo img {
  vertical-align: middle;
  max-width: 50px;
  max-height: 50px;
}

#Auto {
  color: #4482c3;
}

#Mate {
  color: #285680;
}

nav {
  box-align: end;
  height: 100%;
}

nav a {
  padding: 0 1em;
}
`

const Header = props => {
  const { user } = props
  return (
    <StyledHeader>
      <div id='logo'>
        <h1>
          <a href='/'>
            <img src='/static/configuration.svg' alt='AutoMate' />
            <span id='Auto'>&nbsp;Auto</span><span id='Mate'>Mate</span>
          </a>
        </h1>
      </div>
      <nav>
        <Link href='/'>
          <a>Home</a>
        </Link>
        <Link href='/interfaces'>
          <a>Interfaces</a>
        </Link>
        <Link href='/characterization'>
          <a>Characterization</a>
        </Link>
        <Link href='/system'>
          <a>System</a>
        </Link>
        <Link href='/projects'>
          <a>Projects</a>
        </Link>
        <Link href='/instruments'>
          <a>Instruments</a>
        </Link>
        <Link href='/user'>
          <a>{user ? user.name : 'User'}</a>
        </Link>
      </nav>
    </StyledHeader>
  )
}

export default Header