hide mobile menu on page change

tarikcoskun · Oct 11, 2024 · 9c6590b · 9c6590b
1 parent cc62f27
commit 9c6590b
Showing 1 changed file with 4 additions and 5 deletions.
diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx
@@ -13,10 +13,12 @@ import { NavbarDownloadButton } from "./NavbarDownloadButton";
 // Styles
 import style from "./Navbar.module.scss";
 import classNames from "classnames/bind";
+import { usePathname } from "next/navigation";
 
 const cx = classNames.bind(style);
 
 export function Navbar() {
+  const path = usePathname();
   const [mobileMenu, setMobileMenu] = React.useState(false);
 
   React.useEffect(() => {
@@ -25,11 +27,8 @@ export function Navbar() {
   }, [mobileMenu]);
 
   React.useEffect(() => {
-    const listener = () => setMobileMenu(false);
-
-    window.addEventListener("hashchange", listener);
-    return () => window.removeEventListener("hashchange", listener);
-  }, []);
+    setMobileMenu(false);
+  }, [path]);
 
   return (
     <header role="banner" className={cx("container", "contentPadding")}>