Merge pull request #34 from sfuosdev/26-close-the-slide-out-menu-on-navigation-to-new-route-mobile-view

Issue 26: Close mobile nav on navigation

Author: TommyOh0428

src/components/Header.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
 import { getBasePath } from '../utils/basePath';
 
 const Header = () => {
   const basePath = getBasePath();
   const [menuOpen, setMenuOpen] = useState(false);
+  const location = useLocation();
 
   const openMenu = () => {
     setMenuOpen(true);
@@ -14,6 +15,10 @@ const Header = () => {
     setMenuOpen(false);
   };
 
+  useEffect(() => {
+    closeMenu();
+  }, [location.pathname]);
+
   return (
     <div className="relative">
       <header className="flex flex-row justify-between items-center bg-background-header px-6 md:px-12 h-[60px] md:h-20 w-full shadow-lg fixed top-0 left-0 z-10">