✨ Add responsive Navbar

components/Navbar.js

@@ -0,0 +1,59 @@
+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;