81 lines
2.2 KiB
JavaScript
81 lines
2.2 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Button } from "./Button";
|
|
import { Link } from "react-router-dom";
|
|
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);
|
|
}
|
|
};
|
|
|
|
/* 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>
|
|
<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>
|
|
<li>
|
|
<Link
|
|
to="/login"
|
|
className="nav-links-mobile"
|
|
onClick={closeMobileMenu}
|
|
>
|
|
Anmelden
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
{button && <Button buttonStyle="btn--outline">SIGN UP</Button>}
|
|
</div>
|
|
</nav>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Navbar;
|