119 lines
3.3 KiB
JavaScript
119 lines
3.3 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { useAuth, logout } from "../auth/AuthProvider";
|
|
import "./Navbar.css";
|
|
import "@fortawesome/fontawesome-free/css/all.css";
|
|
|
|
function Navbar() {
|
|
const [click, setClick] = useState(false);
|
|
// eslint-disable-next-line
|
|
const [button, setButton] = useState(true);
|
|
|
|
const handleClick = () => setClick(!click);
|
|
const closeMobileMenu = () => setClick(false);
|
|
|
|
const showButton = () => {
|
|
if (window.innerWidth <= 960) {
|
|
setButton(false);
|
|
} else {
|
|
setButton(true);
|
|
}
|
|
};
|
|
|
|
const [isLoggedIn] = useAuth();
|
|
|
|
/* Shows the button after resizing the screen */
|
|
useEffect(() => {
|
|
showButton();
|
|
}, []);
|
|
window.addEventListener("resize", showButton);
|
|
|
|
return (
|
|
<>
|
|
<nav className="navbar">
|
|
<div className="navbar-container">
|
|
<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
|
|
Bachelorarbeit Marco Camenzind{" "}
|
|
</Link>
|
|
<div className="menu-icon" onClick={handleClick}>
|
|
<i className={click ? "fas fa-times" : "fas fa-bars"} />
|
|
</div>
|
|
<ul className={click ? "nav-menu active" : "nav-menu"}>
|
|
<li className="nav-item">
|
|
<Link to="/" className="nav-links" onClick={closeMobileMenu}>
|
|
Startseite
|
|
</Link>
|
|
</li>
|
|
{isLoggedIn && (
|
|
<li className="nav-item">
|
|
<Link
|
|
to="/study"
|
|
className="nav-links"
|
|
onClick={closeMobileMenu}
|
|
>
|
|
Studie
|
|
</Link>
|
|
</li>
|
|
)}
|
|
<li className="nav-item">
|
|
<Link to="/Ueber" className="nav-links" onClick={closeMobileMenu}>
|
|
Über
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
to="/manual"
|
|
className="nav-links"
|
|
onClick={closeMobileMenu}
|
|
>
|
|
Anleitung
|
|
</Link>
|
|
</li>
|
|
{isLoggedIn ? (
|
|
<li className="nav-item">
|
|
<>
|
|
<Link to="/" className="nav-links" onClick={() => logout()}>
|
|
Abmelden
|
|
</Link>
|
|
</>
|
|
</li>
|
|
) : (
|
|
<>
|
|
<li className="nav-item">
|
|
<Link
|
|
to="/login"
|
|
className="nav-links"
|
|
onClick={closeMobileMenu}
|
|
>
|
|
Anmelden
|
|
</Link>
|
|
</li>
|
|
<li className="nav-item">
|
|
<Link
|
|
to="/register"
|
|
className="nav-links"
|
|
onClick={closeMobileMenu}
|
|
>
|
|
Registrieren
|
|
</Link>
|
|
</li>
|
|
</>
|
|
)}
|
|
<li>
|
|
<Link
|
|
to="/login"
|
|
className="nav-links-mobile"
|
|
onClick={closeMobileMenu}
|
|
>
|
|
Anmelden
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Navbar;
|