Merge pull request #129 from Web-Dev-Path/fix/mobile-nav

Add `useEffect` to set navbar active status to false when route change

Author: cherylli

CHANGELOG.md

@@ -58,3 +58,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - improved LightHouse scores by optmizing images, creating a robots.txt file and adding proper alt tags
 - updated 'about us' first section (our background, peer reviews, version control)
 - updated 'about us' section (our goals, our purpose)
+- updated mobile nav to automatically close when page route change is completed

components/layout/Nav.js

@@ -39,6 +39,19 @@ export default function Nav() {
     };
   }, []);
 
+  useEffect(() => {
+    const handleRouteChange = () => {
+      setActive(false)
+    }
+
+    router.events.on('routeChangeComplete', handleRouteChange)
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
+  }, []);
+
+
   return (
     <header className={styles.header} ref={headerRef}>
       <Container>