2021-05-27 01:07:54 +00:00
|
|
|
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";
|
2021-05-25 21:40:27 +00:00
|
|
|
|
|
|
|
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();
|
|
|
|
}, []);
|
2021-05-27 01:07:54 +00:00
|
|
|
window.addEventListener("resize", showButton);
|
2021-05-25 21:40:27 +00:00
|
|
|
return (
|
|
|
|
<>
|
2021-05-27 02:19:22 +00:00
|
|
|
{" "}
|
2021-05-27 01:07:54 +00:00
|
|
|
<nav className="navbar">
|
2021-05-27 02:19:22 +00:00
|
|
|
{" "}
|
2021-05-27 01:07:54 +00:00
|
|
|
<div className="navbar-container">
|
2021-05-27 02:19:22 +00:00
|
|
|
{" "}
|
2021-05-27 01:07:54 +00:00
|
|
|
<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
|
2021-05-27 02:19:22 +00:00
|
|
|
{" "}
|
2021-06-21 01:45:22 +00:00
|
|
|
Bachelorarbeit Marco Camenzind{" "}
|
2021-05-27 02:19:22 +00:00
|
|
|
</Link>{" "}
|
2021-05-27 01:07:54 +00:00
|
|
|
<div className="menu-icon" onClick={handleClick}>
|
2021-05-27 02:19:22 +00:00
|
|
|
{" "}
|
|
|
|
<i className={click ? "fas fa-times" : "fas fa-bars"} />{" "}
|
|
|
|
</div>{" "}
|
2021-05-27 01:07:54 +00:00
|
|
|
<ul className={click ? "nav-menu active" : "nav-menu"}>
|
2021-05-27 02:19:22 +00:00
|
|
|
{" "}
|
2021-05-27 01:07:54 +00:00
|
|
|
<li className="nav-item">
|
|
|
|
<Link to="/" className="nav-links" onClick={closeMobileMenu}>
|
2021-05-27 02:19:22 +00:00
|
|
|
Startseite
|
2021-05-25 21:40:27 +00:00
|
|
|
</Link>
|
|
|
|
</li>
|
2021-05-27 01:07:54 +00:00
|
|
|
<li className="nav-item">
|
2021-06-22 23:56:27 +00:00
|
|
|
<Link to="/Ueber" className="nav-links" onClick={closeMobileMenu}>
|
2021-05-27 02:19:22 +00:00
|
|
|
Über
|
2021-05-25 21:40:27 +00:00
|
|
|
</Link>
|
|
|
|
</li>
|
2021-05-27 02:19:22 +00:00
|
|
|
<li>
|
2021-05-25 21:40:27 +00:00
|
|
|
<Link
|
2021-06-22 22:19:17 +00:00
|
|
|
to="/manual"
|
2021-05-27 01:07:54 +00:00
|
|
|
className="nav-links"
|
2021-05-25 21:40:27 +00:00
|
|
|
onClick={closeMobileMenu}
|
|
|
|
>
|
2021-06-21 01:45:22 +00:00
|
|
|
Anleitung
|
2021-05-25 21:40:27 +00:00
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<Link
|
2021-06-22 22:15:43 +00:00
|
|
|
to="/login"
|
2021-05-27 01:07:54 +00:00
|
|
|
className="nav-links-mobile"
|
2021-05-25 21:40:27 +00:00
|
|
|
onClick={closeMobileMenu}
|
|
|
|
>
|
2021-05-27 02:19:22 +00:00
|
|
|
Anmelden
|
2021-05-25 21:40:27 +00:00
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
</ul>
|
2021-05-27 01:07:54 +00:00
|
|
|
{button && <Button buttonStyle="btn--outline">SIGN UP</Button>}
|
2021-05-25 21:40:27 +00:00
|
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Navbar;
|