From 51409691c1247793aaae65aedb373e1f044e8d25 Mon Sep 17 00:00:00 2001
From: phoenixpereira <phoenixpereira99@gmail.com>
Date: Mon, 12 Feb 2024 11:48:54 +1030
Subject: [PATCH] fix: mobile menu closes when link pressed

---
 src/components/Header.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d9bbde89..4a37eb83 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -29,6 +29,10 @@ export default function Header() {
         };
     }, []);
 
+    const closeMenu = () => {
+        setIsMenuOpen(false);
+    };
+
     const handleResize = () => {
         if (window.innerWidth >= 768) {
             setIsMenuOpen(false);
@@ -116,16 +120,16 @@ export default function Header() {
                             isMenuOpen ? 'mt-12 space-y-8' : 'hidden'
                         } mb-4 text-4xl md:mb-0 md:flex md:flex-row md:space-x-4 md:space-y-0 md:text-base lg:space-x-8`}
                     >
-                        <Link href="/about" className="hover:underline">
+                        <Link href="/about" className="hover:underline" onClick={closeMenu}>
                             About
                         </Link>
-                        <Link href="/events" className="hover:underline">
+                        <Link href="/events" className="hover:underline" onClick={closeMenu}>
                             Events
                         </Link>
-                        <Link href="/sponsors" className="hover:underline">
+                        <Link href="/sponsors" className="hover:underline" onClick={closeMenu}>
                             Sponsors
                         </Link>
-                        <Link href="/contact" className="hover:underline">
+                        <Link href="/contact" className="hover:underline" onClick={closeMenu}>
                             Contact
                         </Link>
                         <div
@@ -135,17 +139,17 @@ export default function Header() {
                         >
                             {isSignedIn ? (
                                 <>
-                                    <Button colour="purple" href="/join">
+                                    <Button colour="purple" href="/join" onClick={closeMenu}>
                                         Continue Signing Up
                                     </Button>
                                     <UserButton />
                                 </>
                             ) : (
                                 <>
-                                    <Button colour="orange" href="/signin">
+                                    <Button colour="orange" href="/signin" onClick={closeMenu}>
                                         Sign In
                                     </Button>
-                                    <Button colour="purple" href="/join">
+                                    <Button colour="purple" href="/join" onClick={closeMenu}>
                                         Join Us
                                     </Button>
                                 </>