julius/cutt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add logo to login page (header not available then)

Browse Source
This commit is contained in:
julius
2025-12-18 13:28:18 +01:00
parent b6ce89b712
commit 5a4918330e
2 changed files with 47 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/Header.tsx
View File

@@ -3,7 +3,7 @@ import { useSession } from "./Session";
import { useState } from "react";
export default function Header() {
const { user, teams, players } = useSession();
const { user, teams, setTeams, players, onLogout } = useSession();
const [burgerActive, setBurgerActive] = useState(false);
return (
<nav className="navbar" role="navigation" aria-label="main navigation">
@@ -36,31 +36,46 @@ export default function Header() {
className={"navbar-menu" + (burgerActive ? " is-active" : "")}
id="navbar"
>
<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>
{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">
{user ? (
<button className="button is-light">Log out</button>
) : (
<>
<button className="button is-success">
<strong>Sign up</strong>
</button>
<button className="button is-light">Log in</button>
</>
)}
<button className="button is-light" onClick={onLogout}>
Log out
</button>
</div>
</div>
</div>