✨ Add isActive color | Add close menu on click
This commit is contained in:
stefan080106
@@ -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>
|
||||
|
||||
@@ -99,11 +99,6 @@
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.Navbar .Nav a:hover {
|
||||
cursor: pointer;
|
||||
color: #057ca6;
|
||||
}
|
||||
|
||||
.Navbar .MenuOpen {
|
||||
width: 100%;
|
||||
display: -webkit-box !important;
|
||||
@@ -122,6 +117,13 @@
|
||||
.container .MenuToggle {
|
||||
display: none;
|
||||
}
|
||||
.Nav a:hover {
|
||||
cursor: pointer;
|
||||
color: #057ca6;
|
||||
}
|
||||
.NavActive {
|
||||
color: #057ca6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -144,5 +146,8 @@
|
||||
.container .MenuToggle {
|
||||
display: block;
|
||||
}
|
||||
.NavActive {
|
||||
color: #eaeaea;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=Navbar.module.css.map */
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"Navbar.module.scss"
|
||||
],
|
||||
|
||||
@@ -66,10 +66,6 @@
|
||||
a {
|
||||
padding: 1rem;
|
||||
transition: all 0.2s;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #057ca6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.MenuOpen {
|
||||
@@ -90,6 +86,13 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.Nav a:hover {
|
||||
cursor: pointer;
|
||||
color: #057ca6;
|
||||
}
|
||||
.NavActive {
|
||||
color: #057ca6;
|
||||
}
|
||||
}
|
||||
//Small devices
|
||||
@media (max-width: 768px) {
|
||||
@@ -106,4 +109,7 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.NavActive {
|
||||
color: #eaeaea;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user