cash-stacks/frontend/src/layout/AppHeader/index.tsx

import { ReactNode } from 'react'
import { Link } from 'react-router-dom'
import { useUserContext } from '../../contexts/UserContext'
// import { Avatar, Dropdown, Menu } from 'antd'
// import { Button } from '../../elements/Button'

import './style.scss'

type Props = {
  children: ReactNode
}

export const AppHeader = ({ children }: Props) => {
  const { user } = useUserContext()

  // Unauthed Header
  if (!user)
    return (
      <header className="stax-header">
        <h3>CashStacks! 💵</h3>
      </header>
    )

  // Authed Header
  return (
    <header>
      <div className="header-left">
        <Link to="/">
          <h3>CashStacks! 💵</h3>
        </Link>
      </div>
      <nav>{children}</nav>
      {user && (
        <div className="header-right">
          <p>Welcome, {user?.username}!!</p>
          {/* <Dropdown
            overlay={
              <Menu style={{ display: 'flex', flexDirection: 'column' }}>
                <Button onClick={() => history.push('/login')}>Login</Button>
                <Button onClick={handleLogout}>Logout</Button>
                <Button onClick={() => history.push('/forgot-password')}>
                  Forgot Password
                </Button>
                <Button onClick={() => history.push('/profile')}>
                  Profile
                </Button>
              </Menu>
            }
          >
            <Avatar>{user.username[0]}</Avatar>
          </Dropdown> */}
        </div>
      )}
    </header>
  )
}