60 lines
1.3 KiB
JavaScript
60 lines
1.3 KiB
JavaScript
import styles from "../styles/Navbar.module.css";
|
|
// Import Component
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
// Import Images
|
|
import LogoAgs from "../public/Logo_AGS.png";
|
|
import { useState } from "react";
|
|
|
|
const Header = () => {
|
|
const [MenuToggle, setMenuToggle] = useState(false);
|
|
|
|
return (
|
|
<navbar className={styles.Navbar}>
|
|
<div className={styles.container}>
|
|
{/* logo */}
|
|
<div className={styles.Logo}>
|
|
<Image
|
|
src={LogoAgs}
|
|
alt="Logo"
|
|
layout="responsive"
|
|
// blurDataURL="data:..." automatically provided
|
|
// placeholder="blur" // Optional blur-up while loading
|
|
/>
|
|
</div>
|
|
{/* Menu Toggle */}
|
|
<div
|
|
onClick={() => setMenuToggle(!MenuToggle)}
|
|
className={styles.MenuToggle + " " + (MenuToggle ? styles.MenuActive : "")}
|
|
>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
{/* Nav */}
|
|
<nav className={styles.Nav + " " + (MenuToggle ? styles.MenuOpen : "")}>
|
|
<Link href="/">
|
|
<a>Start</a>
|
|
</Link>
|
|
|
|
<Link href="/unsere-leistungen">
|
|
<a>Unsere Leistungen</a>
|
|
</Link>
|
|
|
|
<Link href="/über-uns">
|
|
<a>Über uns</a>
|
|
</Link>
|
|
|
|
{/* <li>Unser Team</li> */}
|
|
|
|
<Link href="/Kontakt">
|
|
<a>Kontakt</a>
|
|
</Link>
|
|
</nav>
|
|
</navbar>
|
|
);
|
|
};
|
|
|
|
export default Header;
|