fix: mobile menu closes when link pressed

compsci-adl · Feb 12, 2024 · 5140969 · 5140969
1 parent 9bcc739
commit 5140969
Showing 1 changed file with 11 additions and 7 deletions.
diff --git 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>
                                 </>