✨ Add isActive color | Add close menu on click

components/Navbar.js

@@ -10,7 +10,7 @@ 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}>
@@ -26,8 +26,8 @@ const Header = () => {
 				</div>
 				{/* Menu Toggle */}
 				<div
-					onClick={() => setMenuToggle(!MenuToggle)}
 					className={styles.MenuToggle + " " + (MenuToggle ? styles.MenuActive : "")}
+					onClick={() => setMenuToggle(!MenuToggle)}
 				>
 					<span></span>
 					<span></span>
@@ -35,23 +35,44 @@ const Header = () => {
 				</div>
 			</div>
 			{/* Nav */}
+			{/* TODO: Set Menu Toggle false if click */}
 			<nav className={styles.Nav + " " + (MenuToggle ? styles.MenuOpen : "")}>
 				<Link href="/">
-					<a>Start</a>
+					<a
+						className={router.pathname == "/" ? styles.NavActive : ""}
+						onClick={() => setMenuToggle(false)}
+					>
+						Start
+					</a>
 				</Link>
 
 				<Link href="/unsere-leistungen">
-					<a>Unsere Leistungen</a>
+					<a
+						className={router.pathname == "/unsere-leistungen" ? styles.NavActive : ""}
+						onClick={() => setMenuToggle(false)}
+					>
+						Unsere Leistungen
+					</a>
 				</Link>
 
-				<Link href="/über-uns">
-					<a>Über uns</a>
+				<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>Kontakt</a>
+					<a
+						className={router.pathname == "/Kontakt" ? styles.NavActive : ""}
+						onClick={() => setMenuToggle(false)}
+					>
+						Kontakt
+					</a>
 				</Link>
 			</nav>
 		</navbar>