87 lines
3.2 KiB
JavaScript
87 lines
3.2 KiB
JavaScript
import React, { useContext } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { AuthContext } from "../../AuthProvider";
|
|
import "bulma/css/bulma.min.css";
|
|
|
|
const MainNavigation = () => {
|
|
const { user, login, logout } = useContext(AuthContext);
|
|
|
|
return (
|
|
<nav className="navbar is-dark" role="navigation" aria-label="main navigation">
|
|
<div className="navbar-brand">
|
|
<Link className="navbar-item" to="/">
|
|
Home
|
|
</Link>
|
|
<a
|
|
role="button"
|
|
className="navbar-burger"
|
|
aria-label="menu"
|
|
aria-expanded="false"
|
|
data-target="navbarBasicExample"
|
|
onClick={(e) => {
|
|
e.currentTarget.classList.toggle("is-active");
|
|
document
|
|
.getElementById("navbarBasicExample")
|
|
.classList.toggle("is-active");
|
|
}}
|
|
>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
|
|
<div id="navbarBasicExample" className="navbar-menu">
|
|
<div className="navbar-start">
|
|
<a
|
|
href="https://mail.hangman-lab.top"
|
|
className="navbar-item"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
MailBox
|
|
</a>
|
|
<a
|
|
href="https://git.hangman-lab.top"
|
|
className="navbar-item"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Git
|
|
</a>
|
|
</div>
|
|
|
|
<div className="navbar-end">
|
|
{user && user.profile ? (
|
|
<div className="navbar-item">
|
|
<div className="buttons">
|
|
<span className="button is-primary is-light">
|
|
{user.profile.name}
|
|
</span>
|
|
<button
|
|
className="button is-danger"
|
|
onClick={logout}
|
|
type="button"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="navbar-item">
|
|
<button
|
|
className="button is-primary"
|
|
onClick={login}
|
|
type="button"
|
|
>
|
|
Login
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default MainNavigation; |