39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import React from "react"
|
|
import {Link, useLocation} from "react-router-dom"
|
|
import useAuthUser from "../hooks/AuthUser"
|
|
import useDimension from "../hooks/DimensionHook"
|
|
|
|
const Header = () => {
|
|
|
|
const {authUser} = useAuthUser()
|
|
const location = useLocation()
|
|
const {targetRef, dimensions} = useDimension()
|
|
|
|
return <header ref={targetRef}
|
|
className="flex justify-between bg-blue-700 px-5 py-3 text-xl text-white">
|
|
<div>
|
|
<Link to="/" className={`font-bold`}>
|
|
{dimensions.width < 400 ? 'B' : 'Bermite'}
|
|
</Link>
|
|
</div>
|
|
|
|
{authUser?.locations && authUser.locations.length > 0 && <nav className="flex gap-2">
|
|
<Link to="/pluviometrie" className={location.pathname === '/pluviometrie' ? 'font-bold' : ''}>Pluviométrie</Link>
|
|
<Link to="/meteo" className={location.pathname === '/meteo' ? 'font-bold' : ''}>Météo</Link>
|
|
</nav>}
|
|
|
|
{authUser
|
|
? <span className="flex gap-2">
|
|
<Link to="/profile" className={`${location.pathname === '/profile' ? 'font-bold' : ''} font-bold`}>
|
|
{dimensions.width < 400 ? authUser.name[0] : authUser.name}
|
|
</Link>
|
|
</span>
|
|
: <span className="flex gap-2">
|
|
<Link to="/connexion">Connexion</Link>
|
|
{/*<Link to="/sinscrire">S'inscrire</Link>*/}
|
|
</span>}
|
|
</header>
|
|
}
|
|
|
|
export default Header
|