82 lines
2.0 KiB
JavaScript
82 lines
2.0 KiB
JavaScript
import styles from "../styles/Navbar.module.css";
|
|
// Import Component
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
// Import Images
|
|
import LogoAgs from "../public/Logo_AGS.png";
|
|
import { useState } from "react";
|
|
|
|
const Header = () => {
|
|
const router = useRouter();
|
|
const [MenuToggle, setMenuToggle] = useState(false);
|
|
console.log(router.pathname);
|
|
return (
|
|
<navbar className={styles.Navbar}>
|
|
<div className={styles.container}>
|
|
{/* logo */}
|
|
<div onClick={() => router.push("/")} 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
|
|
className={styles.MenuToggle + " " + (MenuToggle ? styles.MenuActive : "")}
|
|
onClick={() => setMenuToggle(!MenuToggle)}
|
|
>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
{/* Nav */}
|
|
<nav className={styles.Nav + " " + (MenuToggle ? styles.MenuOpen : "")}>
|
|
<Link href="/">
|
|
<a
|
|
className={router.pathname == "/" ? styles.NavActive : ""}
|
|
onClick={() => setMenuToggle(false)}
|
|
>
|
|
Start
|
|
</a>
|
|
</Link>
|
|
|
|
<Link href="/unsere-leistungen">
|
|
<a
|
|
className={router.pathname == "/unsere-leistungen" ? styles.NavActive : ""}
|
|
onClick={() => setMenuToggle(false)}
|
|
>
|
|
Unsere Leistungen
|
|
</a>
|
|
</Link>
|
|
|
|
<Link href="/ueber-uns">
|
|
<a
|
|
className={router.pathname == "/ueber-uns" ? styles.NavActive : ""}
|
|
onClick={() => setMenuToggle(false)}
|
|
>
|
|
Über uns
|
|
</a>
|
|
</Link>
|
|
|
|
{/* <li>Unser Team</li> */}
|
|
|
|
<Link href="/Kontakt">
|
|
<a
|
|
className={router.pathname == "/Kontakt" ? styles.NavActive : ""}
|
|
onClick={() => setMenuToggle(false)}
|
|
>
|
|
Kontakt
|
|
</a>
|
|
</Link>
|
|
</nav>
|
|
</navbar>
|
|
);
|
|
};
|
|
|
|
export default Header;
|