45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
|
import {useState} from "react";
|
||
|
|
import {Link, useNavigate} from "react-router-dom";
|
||
|
|
import {useApi} from "../api";
|
||
|
|
import AppName from "./AppName";
|
||
|
|
import {MenuList, MenuListItem} from "./MenuList";
|
||
|
|
|
||
|
|
export default function HeaderBar() {
|
||
|
|
const api = useApi();
|
||
|
|
const navigate = useNavigate()
|
||
|
|
const [showMenu, setShowMenu] = useState(false)
|
||
|
|
|
||
|
|
if (!api.IsLogged()) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-neutral-800 py-4 f-r justify-between items-center gap-2 px-0 xl:px-96">
|
||
|
|
<div className="f-r flex-1 justify-start">
|
||
|
|
<Link to={api.IsLogged() ? "/projects" : "/"}>
|
||
|
|
<AppName/>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 f-r items-center justify-end">
|
||
|
|
{
|
||
|
|
api.GetUserData() ?
|
||
|
|
<>
|
||
|
|
<div className="p-1 px-2 border border-neutral-500 rounded-md relative">
|
||
|
|
<div className="cursor-pointer" onClick={() => { setShowMenu(!showMenu) }}>
|
||
|
|
{api.GetUserData().email}
|
||
|
|
</div>
|
||
|
|
<MenuList show={showMenu}>
|
||
|
|
<MenuListItem text="Logout" onClick={async () => {
|
||
|
|
await api.Logout();
|
||
|
|
navigate("/")
|
||
|
|
}}/>
|
||
|
|
</MenuList>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
: ""
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|