diff --git a/components/Navbar.js b/components/Navbar.js index 3d56b79..9935dde 100644 --- a/components/Navbar.js +++ b/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 (
@@ -26,8 +26,8 @@ const Header = () => {
{/* Menu Toggle */}
setMenuToggle(!MenuToggle)} className={styles.MenuToggle + " " + (MenuToggle ? styles.MenuActive : "")} + onClick={() => setMenuToggle(!MenuToggle)} > @@ -35,23 +35,44 @@ const Header = () => {
{/* Nav */} + {/* TODO: Set Menu Toggle false if click */}
diff --git a/styles/Navbar.module.css b/styles/Navbar.module.css index 89e431b..bd2913a 100644 --- a/styles/Navbar.module.css +++ b/styles/Navbar.module.css @@ -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 */ \ No newline at end of file diff --git a/styles/Navbar.module.css.map b/styles/Navbar.module.css.map index 59db5b6..257984d 100644 --- a/styles/Navbar.module.css.map +++ b/styles/Navbar.module.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "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", + "mappings": "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", "sources": [ "Navbar.module.scss" ], diff --git a/styles/Navbar.module.scss b/styles/Navbar.module.scss index b73ae48..1586942 100644 --- a/styles/Navbar.module.scss +++ b/styles/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; + } }