Bachelorthesis_Code/frontend/src/components/Navbar.js

107 lines
2.9 KiB
JavaScript
Raw Normal View History

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);
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();
2021-06-26 22:29:29 +00:00
/* Shows the button after resizing the screen */
useEffect(() => {
showButton();
}, []);
window.addEventListener("resize", showButton);
2021-06-26 22:29:29 +00:00
return (
<>
<nav className="navbar">
<div className="navbar-container">
<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
2021-06-21 01:45:22 +00:00
Bachelorarbeit Marco Camenzind{" "}
2021-06-26 22:29:29 +00:00
</Link>
<div className="menu-icon" onClick={handleClick}>
2021-06-26 22:29:29 +00:00
<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>
<li className="nav-item">
<Link to="/Ueber" className="nav-links" onClick={closeMobileMenu}>
Über
</Link>
</li>
<li>
<Link
to="/manual"
className="nav-links"
onClick={closeMobileMenu}
>
2021-06-21 01:45:22 +00:00
Anleitung
</Link>
</li>
{isLoggedIn ? (
<li className="nav-item">
<>
<Link to="/" className="nav-links" onClick={() => logout()}>
Abmelden
</Link>
</>
</li>
) : (
2021-07-06 00:41:24 +00:00
<>
<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>
2021-07-06 00:41:24 +00:00
</>
)}
<li>
<Link
to="/login"
className="nav-links-mobile"
onClick={closeMobileMenu}
>
Anmelden
</Link>
</li>
</ul>
</div>
</nav>
</>
);
}
export default Navbar;