FunctionProject/website/components/Header/Header.js

import { useState, useContext } from 'react'
import { UserContext } from '../../contexts/UserContext'
import Link from 'next/link'
import { useRouter } from 'next/router'
import NavigationLink from './NavigationLink'
import './Header.css'

export default function Header () {
  const { isAuth, logoutUser, user } = useContext(UserContext)
  const [isActive, setIsActive] = useState(false)
  const { pathname } = useRouter()

  const toggleNavbar = () => {
    setIsActive(!isActive)
  }

  return (
    <header className='Header'>
      <div className='container'>

        {/* Brand */}
        <Link href='/'>
          <a className='Header__brand-link'>
            <img id='brand-link__logo' src='/images/FunctionProject_brand-logo.png' alt='FunctionProject' />
            <img id='brand-link__logo-small-screen' src='/images/FunctionProject_icon_small.png' alt='FunctionProject' />
          </a>
        </Link>

        {/* Hamburger icon on Mobile */}
        <div onClick={toggleNavbar} className={`Header__hamburger ${(isActive) ? 'Header__hamburger-active' : ''}`}>
          <span />
        </div>

        {/* Navigation */}
        <nav className='Header__navbar'>
          <ul className={`navbar__list ${(isActive) ? 'navbar__list-active' : ''}`}>
            <NavigationLink name='Accueil' path='/' />
            <NavigationLink name='Fonctions' path='/functions' />
            <NavigationLink name='Utilisateurs' path='/users' />
            {
              (!isAuth)
                ? (
                  <>
                    <NavigationLink name="S'inscrire" path='/users/register' />
                    <NavigationLink name='Connexion' path='/users/login' />
                  </>
                )
                : (
                  <>
                    <li className='navbar-item'>
                      <Link href='/users/[name]' as={`/users/${user.name}`}>
                        <a className={`navbar-link ${pathname === '/users/[name]' ? 'navbar-link-active' : null}`}>Mon Profil</a>
                      </Link>
                    </li>
                    <li className='navbar-item'>
                      <Link href='/'>
                        <a onClick={logoutUser} className='navbar-link'>Se déconnecter</a>
                      </Link>
                    </li>
                  </>
                )
            }
            {
              (isAuth && user.isAdmin) &&
                <NavigationLink name='Admin' path='/admin' />
            }
          </ul>
        </nav>

      </div>
    </header>
  )
}