fix(header): Mobile menu closes as expected (#48)

* fix: add window resize check for header * fix: mobile menu closes when link pressed * refactor: replace useEffect with useMount * refactor: add breakpoint constants for media queries
compsci-adl · Feb 12, 2024 · 7ad7c33 · 7ad7c33
1 parent 5206fa0
commit 7ad7c33
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,10 +1,12 @@
 'use client';
 
 import FancyRectangle from '@/components/FancyRectangle';
+import { BREAKPOINTS } from '@/constants/breakpoints';
+import { useMount } from '@/hooks/use-mount';
 import { useUser } from '@clerk/nextjs';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { IoMdClose, IoMdMenu } from 'react-icons/io';
 import Button from './Button';
 import UserButton from './UserButton';
@@ -19,13 +21,25 @@ export default function Header() {
         setIsMenuOpen(!isMenuOpen);
     };
 
-    useEffect(() => {
+    useMount(() => {
         window.addEventListener('scroll', handleScroll);
+        window.addEventListener('resize', handleResize);
 
         return () => {
             window.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('resize', handleResize);
         };
-    }, []);
+    });
+
+    const closeMenu = () => {
+        setIsMenuOpen(false);
+    };
+
+    const handleResize = () => {
+        if (window.innerWidth >= BREAKPOINTS.md) {
+            setIsMenuOpen(false);
+        }
+    };
 
     const handleScroll = () => {
         const scrollPosition = window.scrollY;
@@ -108,16 +122,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
@@ -127,17 +141,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>
                                 </>

diff --git a/src/constants/breakpoints.ts b/src/constants/breakpoints.ts
@@ -0,0 +1,6 @@
+export const BREAKPOINTS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+} as const;