Header.js

import React from 'react'
import Link from 'next/link'
import classNames from 'classnames'

import Logout from './Logout'
import QuickStart from '../QuickStart'
import Logo from './Logo'

const HomeHeader = ({ loggedIn }) => (
  <div className="hidden lg:flex lg:items-center lg:w-1/4 px-6">
    <Nav loggedIn={loggedIn} />
  </div>
)

const FullHeader = props => (
  <div className="flex flex-grow items-center lg:w-3/4 xl:w-4/5">
    <div className="lg:w-1/4 xl:w-1/5 px-6">
      <Logo />
    </div>

    <div className="flex flex-grow items-center lg:w-3/4 xl:w-4/5">
      <div className="w-full lg:px-6 lg:w-3/4 xl:px-12">
        <QuickStart />
      </div>

      <HomeHeader {...props} />
    </div>
  </div>
)

const Header = ({ authPage, isHome, loggedInUser }) => {
  const loggedIn = !!loggedInUser
  const fullHeader = !authPage && !isHome

  const headerClass = classNames(
    'flex absolute top-0 inset-x-0 z-100 h-20 z-30 items-center',
    {
      'bg-white shadow-header': fullHeader,
    }
  )

  const innerHeaderClass = classNames('flex items-center -mx-6', {
    'justify-end': !authPage,
    'justify-center': authPage,
  })

  return (
    <header className={headerClass}>
      <div className="container relative">
        <div className={innerHeaderClass}>
          {isHome && <HomeHeader />}
          {authPage && <Logo />}
          {fullHeader && <FullHeader loggedIn={loggedIn} />}
        </div>
      </div>
    </header>
  )
}

const Nav = ({ loggedIn }) => {
  if (loggedIn)
    return (
      <ul className="flex items-center justify-end w-full">
        <li>
          <Link href="/dashboard">
            <a>Dashboard</a>
          </Link>
        </li>
        <li>
          <Logout />
        </li>
      </ul>
    )

  return (
    <ul className="flex flex-wrap items-center justify-end w-full">
      <li className="mr-6">
        <Link href="/login">
          <a className="text-purple-900">Login</a>
        </Link>
      </li>
      <li>
        <Link href="/register">
          <a className="button primary">Join for free</a>
        </Link>
      </li>
    </ul>
  )
}

export default Header