stefan.arnold/AGS_IT_Solutions_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Add isActive color | Add close menu on click

Browse Source
This commit is contained in:
stefan080106
2022-05-16 22:22:55 +02:00
parent 14a6429fed
commit f2dba0b715
4 changed files with 49 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/Navbar.js
View File

@@ -10,7 +10,7 @@ import { useState } from "react";
const Header = () => { const Header = () => {
const router = useRouter(); const router = useRouter();
const [MenuToggle, setMenuToggle] = useState(false); const [MenuToggle, setMenuToggle] = useState(false);
console.log(router.pathname);
return ( return (
<navbar className={styles.Navbar}> <navbar className={styles.Navbar}>
<div className={styles.container}> <div className={styles.container}>
@@ -26,8 +26,8 @@ const Header = () => {
</div> </div>
{/* Menu Toggle */} {/* Menu Toggle */}
<div <div
onClick={() => setMenuToggle(!MenuToggle)}
className={styles.MenuToggle + " " + (MenuToggle ? styles.MenuActive : "")} className={styles.MenuToggle + " " + (MenuToggle ? styles.MenuActive : "")}
onClick={() => setMenuToggle(!MenuToggle)}
> >
<span></span> <span></span>
<span></span> <span></span>
@@ -35,23 +35,44 @@ const Header = () => {
</div> </div>
</div> </div>
{/* Nav */} {/* Nav */}
{/* TODO: Set Menu Toggle false if click */}
<nav className={styles.Nav + " " + (MenuToggle ? styles.MenuOpen : "")}> <nav className={styles.Nav + " " + (MenuToggle ? styles.MenuOpen : "")}>
<Link href="/"> <Link href="/">
<a>Start</a> <a
className={router.pathname == "/" ? styles.NavActive : ""}
onClick={() => setMenuToggle(false)}
>
Start
</a>
</Link> </Link>
<Link href="/unsere-leistungen"> <Link href="/unsere-leistungen">
<a>Unsere Leistungen</a> <a
className={router.pathname == "/unsere-leistungen" ? styles.NavActive : ""}
onClick={() => setMenuToggle(false)}
>
Unsere Leistungen
</a>
</Link> </Link>
<Link href="/über-uns"> <Link href="/ueber-uns">
<a>Über uns</a> <a
className={router.pathname == "/ueber-uns" ? styles.NavActive : ""}
onClick={() => setMenuToggle(false)}
>
Über uns
</a>
</Link> </Link>
{/* <li>Unser Team</li> */} {/* <li>Unser Team</li> */}
<Link href="/Kontakt"> <Link href="/Kontakt">
<a>Kontakt</a> <a
className={router.pathname == "/Kontakt" ? styles.NavActive : ""}
onClick={() => setMenuToggle(false)}
>
Kontakt
</a>
</Link> </Link>
</nav> </nav>
</navbar> </navbar>

15
styles/Navbar.module.css
View File

@@ -99,11 +99,6 @@
transition: all 0.2s; transition: all 0.2s;
} }
.Navbar .Nav a:hover {
cursor: pointer;
color: #057ca6;
}
.Navbar .MenuOpen { .Navbar .MenuOpen {
width: 100%; width: 100%;
display: -webkit-box !important; display: -webkit-box !important;
@@ -122,6 +117,13 @@
.container .MenuToggle { .container .MenuToggle {
display: none; display: none;
} }
.Nav a:hover {
cursor: pointer;
color: #057ca6;
}
.NavActive {
color: #057ca6;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -144,5 +146,8 @@
.container .MenuToggle { .container .MenuToggle {
display: block; display: block;
} }
.NavActive {
color: #eaeaea;
}
} }
/*# sourceMappingURL=Navbar.module.css.map */ /*# sourceMappingURL=Navbar.module.css.map */

2
styles/Navbar.module.css.map
View File

@@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "AAAA,OAAO,CAAC,yFAAI;AAEZ,AAAA,OAAO,CAAC;EACP,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,YAAY;EAC7B,cAAc,EAAE,GAAG;EACnB,aAAa,EAAE,iBAAiB;CAyEhC;;AAhFD,AAQC,OARM,CAQN,UAAU,CAAC;EACV,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,YAAY;EAC7B,cAAc,EAAE,GAAG;CAwCnB;;AApDF,AAcE,OAdK,CAQN,UAAU,CAMT,KAAK,CAAC;EACL,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,OAAO;CACf;;AAlBH,AAoBE,OApBK,CAQN,UAAU,CAYT,WAAW,CAAC;EACX,UAAU,EAAE,QAAQ;CA0BpB;;AA/CH,AAsBG,OAtBI,CAQN,UAAU,CAYT,WAAW,CAEV,IAAI,CAAC;EACJ,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,GAAG;EACX,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,QAAQ;EAElB,UAAU,EAAE,OAAO;EACnB,aAAa,EAAE,GAAG;EAElB,OAAO,EAAE,CAAC;EAEV,gBAAgB,EAAE,OAAO;EAEzB,UAAU,EAAE,SAAS,CAAC,IAAI,CAAC,gCAAgC,EAC1D,UAAU,CAAC,IAAI,CAAC,gCAAgC,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI;CACrE;;AAtCJ,AAwCG,OAxCI,CAQN,UAAU,CAYT,WAAW,CAoBV,IAAI,AAAA,YAAY,CAAC;EAChB,gBAAgB,EAAE,KAAK;CACvB;;AA1CJ,AA4CG,OA5CI,CAQN,UAAU,CAYT,WAAW,CAwBV,IAAI,AAAA,eAAgB,CAAA,CAAC,EAAE;EACtB,gBAAgB,EAAE,OAAO;CACzB;;AA9CJ,AAiDE,OAjDK,CAQN,UAAU,CAyCT,WAAW,CAAC;EACX,SAAS,EAAE,aAAa;CACxB;;AAnDH,AAsDC,OAtDM,CAsDN,IAAI,CAAC;EACJ,WAAW,EAAE,qBAAqB;EAClC,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,GAAG;EAEhB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;EAC7B,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,GAAG;CASnB;;AAvEF,AA+DE,OA/DK,CAsDN,IAAI,CASH,CAAC,CAAC;EACD,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,QAAQ;CAKpB;;AAtEH,AAkEG,OAlEI,CAsDN,IAAI,CASH,CAAC,AAGC,MAAM,CAAC;EACP,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,OAAO;CACd;;AArEJ,AAwEC,OAxEM,CAwEN,SAAS,CAAC;EACT,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,eAAe;EACxB,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,KAAK;EACV,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,KAAK;CACZ;;AAIF,MAAM,EAAE,SAAS,EAAE,KAAK;EACvB,AAAA,UAAU,CAAC;IACV,KAAK,EAAE,IAAI;GAIX;EALD,AAEC,UAFS,CAET,WAAW,CAAC;IACX,OAAO,EAAE,IAAI;GACb;;;AAIH,MAAM,EAAE,SAAS,EAAE,KAAK;EACvB,AAAA,OAAO,CAAC,IAAI,CAAC;IACZ,cAAc,EAAE,MAAM;IACtB,OAAO,EAAE,IAAI;GACb;EACD,AAAA,OAAO,CAAC;IACP,cAAc,EAAE,MAAM;GACtB;EACD,AAAA,UAAU,CAAC;IACV,KAAK,EAAE,IAAI;GAIX;EALD,AAEC,UAFS,CAET,WAAW,CAAC;IACX,OAAO,EAAE,KAAK;GACd", "mappings": "AAAA,OAAO,CAAC,yFAAI;AAEZ,AAAA,OAAO,CAAC;EACP,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,YAAY;EAC7B,cAAc,EAAE,GAAG;EACnB,aAAa,EAAE,iBAAiB;CAqEhC;;AA5ED,AAQC,OARM,CAQN,UAAU,CAAC;EACV,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,YAAY;EAC7B,cAAc,EAAE,GAAG;CAwCnB;;AApDF,AAcE,OAdK,CAQN,UAAU,CAMT,KAAK,CAAC;EACL,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,OAAO;CACf;;AAlBH,AAoBE,OApBK,CAQN,UAAU,CAYT,WAAW,CAAC;EACX,UAAU,EAAE,QAAQ;CA0BpB;;AA/CH,AAsBG,OAtBI,CAQN,UAAU,CAYT,WAAW,CAEV,IAAI,CAAC;EACJ,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,GAAG;EACX,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,QAAQ;EAElB,UAAU,EAAE,OAAO;EACnB,aAAa,EAAE,GAAG;EAElB,OAAO,EAAE,CAAC;EAEV,gBAAgB,EAAE,OAAO;EAEzB,UAAU,EAAE,SAAS,CAAC,IAAI,CAAC,gCAAgC,EAC1D,UAAU,CAAC,IAAI,CAAC,gCAAgC,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI;CACrE;;AAtCJ,AAwCG,OAxCI,CAQN,UAAU,CAYT,WAAW,CAoBV,IAAI,AAAA,YAAY,CAAC;EAChB,gBAAgB,EAAE,KAAK;CACvB;;AA1CJ,AA4CG,OA5CI,CAQN,UAAU,CAYT,WAAW,CAwBV,IAAI,AAAA,eAAgB,CAAA,CAAC,EAAE;EACtB,gBAAgB,EAAE,OAAO;CACzB;;AA9CJ,AAiDE,OAjDK,CAQN,UAAU,CAyCT,WAAW,CAAC;EACX,SAAS,EAAE,aAAa;CACxB;;AAnDH,AAsDC,OAtDM,CAsDN,IAAI,CAAC;EACJ,WAAW,EAAE,qBAAqB;EAClC,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,GAAG;EAEhB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;EAC7B,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,GAAG;CAKnB;;AAnEF,AA+DE,OA/DK,CAsDN,IAAI,CASH,CAAC,CAAC;EACD,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,QAAQ;CACpB;;AAlEH,AAoEC,OApEM,CAoEN,SAAS,CAAC;EACT,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,eAAe;EACxB,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,KAAK;EACV,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,KAAK;CACZ;;AAIF,MAAM,EAAE,SAAS,EAAE,KAAK;EACvB,AAAA,UAAU,CAAC;IACV,KAAK,EAAE,IAAI;GAIX;EALD,AAEC,UAFS,CAET,WAAW,CAAC;IACX,OAAO,EAAE,IAAI;GACb;EAEF,AAAA,IAAI,CAAC,CAAC,AAAA,MAAM,CAAC;IACZ,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,OAAO;GACd;EACD,AAAA,UAAU,CAAC;IACV,KAAK,EAAE,OAAO;GACd;;;AAGF,MAAM,EAAE,SAAS,EAAE,KAAK;EACvB,AAAA,OAAO,CAAC,IAAI,CAAC;IACZ,cAAc,EAAE,MAAM;IACtB,OAAO,EAAE,IAAI;GACb;EACD,AAAA,OAAO,CAAC;IACP,cAAc,EAAE,MAAM;GACtB;EACD,AAAA,UAAU,CAAC;IACV,KAAK,EAAE,IAAI;GAIX;EALD,AAEC,UAFS,CAET,WAAW,CAAC;IACX,OAAO,EAAE,KAAK;GACd;EAEF,AAAA,UAAU,CAAC;IACV,KAAK,EAAE,OAAO;GACd",
"sources": [ "sources": [
"Navbar.module.scss" "Navbar.module.scss"
], ],

14
styles/Navbar.module.scss
View File

@@ -66,10 +66,6 @@
a { a {
padding: 1rem; padding: 1rem;
transition: all 0.2s; transition: all 0.2s;
&:hover {
cursor: pointer;
color: #057ca6;
}
} }
} }
.MenuOpen { .MenuOpen {
@@ -90,6 +86,13 @@
display: none; display: none;
} }
} }
.Nav a:hover {
cursor: pointer;
color: #057ca6;
}
.NavActive {
color: #057ca6;
}
} }
//Small devices //Small devices
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -106,4 +109,7 @@
display: block; display: block;
} }
} }
.NavActive {
color: #eaeaea;
}
} }