90 lines
3.3 KiB
JavaScript
90 lines
3.3 KiB
JavaScript
import LogoIcon from '../assets/FFSSAF-bord-blanc-fond-transparent.webp'
|
|
import './Nav.css'
|
|
import {NavLink} from "react-router-dom";
|
|
import {useAuth} from "../hooks/useAuth.jsx";
|
|
import {login, logout} from "../utils/auth.js";
|
|
|
|
export function Nav() {
|
|
|
|
return <nav className="navbar navbar-light navbar-expand-md bg-body-tertiary " id="main-navbar">
|
|
<div className="container-fluid">
|
|
<a className="navbar-brand" href="/">
|
|
<img className="logo" src={LogoIcon} alt="logo"/>
|
|
FFSAF Intra
|
|
</a>
|
|
|
|
<button className="navbar-toggler" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
|
|
aria-expanded="false" aria-label="Toggle navigation">
|
|
<span className="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div className="collapse navbar-collapse" id="navbarNavDropdown">
|
|
<div className="collapse-item">
|
|
<ul className="navbar-nav">
|
|
<li className="nav-item"><NavLink className="nav-link" to="/">Accueil</NavLink></li>
|
|
<ClubMenu/>
|
|
<AdminMenu/>
|
|
<AffiliationMenu/>
|
|
<LoginMenu/>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
}
|
|
|
|
|
|
function AffiliationMenu() {
|
|
const {is_authenticated} = useAuth()
|
|
|
|
if (is_authenticated)
|
|
return <></>
|
|
return <li className="nav-item"><NavLink className="nav-link" to="/affiliation">Demande d'affiliation</NavLink></li>
|
|
}
|
|
|
|
function ClubMenu() {
|
|
const {is_authenticated, userinfo} = useAuth()
|
|
|
|
if (!is_authenticated || !(userinfo?.roles?.includes("club_president")
|
|
|| userinfo?.roles?.includes("club_secretaire") || userinfo?.roles?.includes("club_tresorier")))
|
|
return <></>
|
|
|
|
return <li className="nav-item dropdown">
|
|
<div className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Club
|
|
</div>
|
|
<ul className="dropdown-menu">
|
|
<li className="nav-item"><NavLink className="nav-link" to="/club/member">Member</NavLink></li>
|
|
<li className="nav-item"><NavLink className="nav-link" to="/club/b">B</NavLink></li>
|
|
</ul>
|
|
</li>
|
|
}
|
|
|
|
function AdminMenu() {
|
|
const {is_authenticated, userinfo} = useAuth()
|
|
|
|
if (!is_authenticated || !userinfo?.roles?.includes("federation_admin"))
|
|
return <></>
|
|
|
|
return <li className="nav-item dropdown">
|
|
<div className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Administration
|
|
</div>
|
|
<ul className="dropdown-menu">
|
|
<li className="nav-item"><NavLink className="nav-link" to="/admin/member">Member</NavLink></li>
|
|
<li className="nav-item"><NavLink className="nav-link" to="/admin/b">B</NavLink></li>
|
|
</ul>
|
|
</li>
|
|
}
|
|
|
|
function LoginMenu() {
|
|
const {is_authenticated} = useAuth()
|
|
|
|
return <li className="nav-item">
|
|
{!is_authenticated ? (
|
|
<div className="nav-link" onClick={() => login()}>Connexion</div>
|
|
) : (
|
|
<div className="nav-link" onClick={() => logout()}>Déconnexion</div>
|
|
)}
|
|
</li>
|
|
} |