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 StyledNav = styled.div`
display: grid;
grid-auto-flow: column;
align-content: end;
`

const Header = props => {
  const { user } = props
  return (
    <StyledNav>
      <Link href='/'>
        <a>Home</a>
      </Link>
      <Link href='/interfaces'>
        <a>Interfaces</a>
      </Link>
      <Link href='/characterization'>
        <a>Characterization</a>
      </Link>
      <Link href='/user'>
        <a>{user ? user.name : 'User'}</a>
      </Link>
    </StyledNav>
  )
}

export default Header