86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import { Link } from "react-router";
|
|
import { useSession } from "./Session";
|
|
import { useState } from "react";
|
|
|
|
export default function Header() {
|
|
const { user, teams, setTeams, players, onLogout } = useSession();
|
|
const [burgerActive, setBurgerActive] = useState(false);
|
|
return (
|
|
<nav className="navbar" role="navigation" aria-label="main navigation">
|
|
<div className="navbar-brand">
|
|
<Link className="navbar-item" to="/">
|
|
<img
|
|
style={{ maxHeight: "unset" }}
|
|
className="image"
|
|
alt="cool ultimate team tool"
|
|
src="cutt.svg"
|
|
/>
|
|
</Link>
|
|
|
|
<a
|
|
role="button"
|
|
className={"navbar-burger" + (burgerActive ? " is-active" : "")}
|
|
aria-label="menu"
|
|
aria-expanded="false"
|
|
data-target="navbar"
|
|
onClick={() => setBurgerActive(!burgerActive)}
|
|
>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
|
|
<div
|
|
className={"navbar-menu" + (burgerActive ? " is-active" : "")}
|
|
id="navbar"
|
|
>
|
|
{user?.scopes.includes(`team:${teams?.activeTeam}`) && (
|
|
<div className="navbar-start">
|
|
<Link className="navbar-item" to="/network">
|
|
<span>Sociogram</span>
|
|
</Link>
|
|
<Link className="navbar-item" to="/mvp">
|
|
<span>MVP</span>
|
|
</Link>
|
|
<Link className="navbar-item" to="/team">
|
|
<span>Team</span>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
<div className="navbar-end">
|
|
{teams && (
|
|
<div className="navbar-item has-dropdown is-hoverable">
|
|
<a className="navbar-link">my teams</a>
|
|
<div className="navbar-dropdown">
|
|
{teams.teams.map((team, index) => (
|
|
<a
|
|
onClick={() => setTeams({ ...teams, activeTeam: team.id })}
|
|
className={
|
|
"navbar-item" +
|
|
(team.id === teams.activeTeam
|
|
? " is-bold has-text-weight-extrabold"
|
|
: "")
|
|
}
|
|
>
|
|
{team.name}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="navbar-item">
|
|
{user?.username}
|
|
<div className="buttons">
|
|
<button className="button is-light" onClick={onLogout}>
|
|
Log out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|