hzhang/HangmanLab.Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upgrade to bulma style

Browse Source
This commit is contained in:
h z
2024-12-05 13:57:42 +00:00
parent 8bae53d026
commit 788fd2f37a
4 changed files with 166 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/Navigations/MainNavigation.js
View File

@@ -1,42 +1,77 @@
//src/components/MainNavigation.js
import React, {useContext} from "react";
import React, { useContext } from "react";
import { Link } from "react-router-dom";
import "./MainNavigation.css";
import {AuthContext} from "../../AuthProvider";
import { AuthContext } from "../../AuthProvider";
import "bulma/css/bulma.min.css";
const MainNavigation = () => {
const { user, login, logout } = useContext(AuthContext);
return (
<nav className="main-navigation">
<ul>
<li>
<Link to="/">Home</Link>
</li>
{ user && user.profile ? (
<div>
<h1>{user.profile.name}</h1>
<button onClick={logout}>logout</button>
</div>
) : (
<li>
<button onClick={login}>Login</button>
</li>
)
<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>
}
<li>
<a href="https://mail.hangman-lab.top" target="_blank" rel="noopener noreferrer">
<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>
</li>
<li>
<a href="https://git.hangman-lab.top" target="_blank" rel="noopener noreferrer">
<a
href="https://git.hangman-lab.top"
className="navbar-item"
target="_blank"
rel="noopener noreferrer"
>
Git
</a>
</li>
</ul>
</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}>
Logout
</button>
</div>
</div>
) : (
<div className="navbar-item">
<button className="button is-primary" onClick={login}>
Login
</button>
</div>
)}
</div>
</div>
</nav>
);
};