sos-nextjs/components/header/header.js

import Link from "next/link"
import PropTypes from "prop-types"
import React from "react"

import logo from './sos-logo.png'
import styles from './style.module.css'

const Header = ({user}) => (
  <header className={styles.container}>
    <div className={styles.logo}>
      <img alt="" src={logo}/>
    </div>
    <h1 className={styles.title}>
      <Link href="/"><a>Society <span>of</span> Socks</a></Link>
    </h1>
    <ul className={styles.primaryNav}>
      <li><Link href="/store/categories"><a>Catalogue</a></Link></li>
      <li><Link href="/store/popular"><a>Popular</a></Link></li>
      <li><Link href="/store/new"><a>New</a></Link></li>
    </ul>
    <ul className={styles.accountNav}>
      <li><Link href="/store/cart"><a><span className="fa fa-shopping-cart"></span> Cart</a></Link></li>
      {
        (!user)?(
          <li><Link href="/login"><a>Log in</a></Link></li>
        ):(
          <>
            <li><Link href="/account"><a>Account</a></Link></li>
            <li><Link href="/logout"><a>Log out</a></Link></li>
          </>
        )
      }
    </ul>
  </header>
)

Header.propTypes = {
  user: PropTypes.object,
}

Header.defaultProps = {
  user: null,
}

export default Header