From 0e5557078318125f1680bc1c74a475ef08968100 Mon Sep 17 00:00:00 2001
From: CatNose <34590683+catnose99@users.noreply.github.com>
Date: Mon, 6 Sep 2021 13:53:30 +0900
Subject: [PATCH] fix: mobile menu doesn't close on click

---
 starter/components/elements/mobile-nav-menu.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/starter/components/elements/mobile-nav-menu.js b/starter/components/elements/mobile-nav-menu.js
index 24d28a6..5dbb3e1 100644
--- a/starter/components/elements/mobile-nav-menu.js
+++ b/starter/components/elements/mobile-nav-menu.js
@@ -1,3 +1,5 @@
+import { useEffect } from "react"
+import { useRouter } from "next/router"
 import PropTypes from "prop-types"
 import { MdClose, MdChevronRight } from "react-icons/md"
 import { mediaPropTypes, linkPropTypes, buttonLinkPropTypes } from "utils/types"
@@ -10,6 +12,12 @@ import CustomLink from "./custom-link"
 const MobileNavMenu = ({ navbar, closeSelf }) => {
   // Prevent window scroll while mobile nav menu is open
   useLockBodyScroll()
+  
+  const router = useRouter()
+
+  useEffect(() => {
+    closeSelf()
+  }, [router.asPath])
 
   return (
     <div className="w-screen h-screen fixed top-0 left-0 overflow-y-scroll bg-white z-10 pb-6">