74 lines
2.5 KiB
JavaScript
74 lines
2.5 KiB
JavaScript
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>
|
|
)
|
|
}
|