fix(header): fix bug preventing header menu from closing

Author: halvaradop

app/src/hooks/use-mobile.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react"
 
-const defaultMediaQuery = "(min-width: 900px)"
+const defaultMediaQuery = "(max-width: 900px)"
 
-export const useMobile = (mediaQuery: string = defaultMediaQuery) => {
-    const [isMobile, setIsMobile] = useState(() => window.matchMedia(mediaQuery).matches)
+export const useIsMobile = (mediaQuery: string = defaultMediaQuery) => {
+    const [isMobile, setIsMobile] = useState(() => false)
 
     useEffect(() => {
         const matchMedia = window.matchMedia(mediaQuery)

app/src/lib/@types/props.ts

@@ -1,5 +1,5 @@
 import type { StaticImageData } from "next/image"
-import type { ButtonHTMLAttributes, PropsWithChildren, JSX, CSSProperties } from "react"
+import type { ButtonHTMLAttributes, PropsWithChildren, JSX, CSSProperties, MouseEventHandler } from "react"
 import type { VariantProps } from "class-variance-authority"
 import type { ArgsFunction, PerType, PresetType } from "./types"
 import type { Transition, Variants } from "motion"
@@ -92,3 +92,7 @@ export interface CallToActionProps {
 export interface SectionLayoutProps extends PropsWithChildren {
     className?: string
 }
+
+export interface HeaderMenuProps {
+    onLinkClick: MouseEventHandler
+}

app/src/ui/community/hero.tsx

@@ -13,7 +13,7 @@ export const HeroSection = () => {
                 Join Our Community
             </TextEffect>
             <TextEffect
-                className="px-4 text-muted text-lg sm:px-6 md:px-8 base:px-10"
+                className="px-4 text-muted text-lg sm:px-6 md:px-8 base:px-10 span:text-ellipsis span:[text-wrap:auto]"
                 preset="fade-in-blur"
                 speedReveal={1.1}
                 speedSegment={0.5}

app/src/ui/globals.css

@@ -69,6 +69,7 @@ It is generating errors to load animations styles
 
         body:has(> header.open) {
             overflow-y: hidden;
+            padding-right: 0.2rem;
         }
 
         main {

app/src/ui/header/header-menu.tsx

@@ -2,8 +2,9 @@ import Link from "next/link"
 import { motion } from "motion/react"
 import { itemVariants, menuVariants } from "@/ui/motion-config/menu.motion"
 import { TextScramble } from "@/ui/motion/text-scramble"
+import { HeaderMenuProps } from "@/lib/@types/props"
 
-export const HeaderMenu = ({ onLinkClick }: { onLinkClick?: () => void } = {}) => {
+export const HeaderMenu = ({ onLinkClick }: HeaderMenuProps) => {
     return (
         <motion.div
             className="w-10/12 max-w-md absolute inset-y-0 right-0 z-20 border border-solid border-border bg-black [--nav-menu:100%] base:w-auto base:max-w-none base:inset-0 base:relative base:bg-transparent base:border-0 base:[--nav-menu:0%]"

app/src/ui/header/header.tsx

@@ -2,6 +2,7 @@
 import Link from "next/link"
 import Image from "next/image"
 import { useCallback, useEffect, useRef, useState } from "react"
+import { useIsMobile } from "@/hooks/use-mobile"
 import { HeaderMenu } from "./header-menu"
 import { AnimatePresence } from "motion/react"
 import { merge } from "@halvaradop/ui-core"
@@ -10,36 +11,31 @@ import menu from "@/assets/menu.svg"
 import arrow from "@/assets/arrow.svg"
 
 export const Header = () => {
+    const isMobile = useIsMobile()
     const [isOpen, setIsOpen] = useState(false)
     const menuRef = useRef<HTMLDivElement>(null)
 
     const handleToggleMenu = () => {
-        setIsOpen(!isOpen)
+        setIsOpen(previous => !previous)
     }
 
     const handleMenuLinkClick = useCallback(() => {
-        if (window.innerWidth < 900) {
+        if (!isMobile) {
             setIsOpen(false)
         }
     }, [])
 
     useEffect(() => {
-        const matchScreen = matchMedia("(min-width: 900px)")
-
-        const handleSetMatchMedia = () => {
-            setIsOpen(matchScreen.matches)
-        }
-
-        setIsOpen(matchScreen.matches)
-        matchScreen.addEventListener("change", handleSetMatchMedia)
-        return () => matchScreen.removeEventListener("change", handleSetMatchMedia)
-    }, [])
+        setIsOpen(!isMobile)
+    }, [isMobile])
 
     useEffect(() => {
         if (!isOpen) return
         const handleClickOutside = (event: MouseEvent) => {
-            if (window.innerWidth < 900 && menuRef.current && !menuRef.current.contains(event.target as Node)) {
-                setIsOpen(false)
+            const node = event.target as HTMLElement
+            if (node.hasAttribute("aria-description") && node.getAttribute("aria-description") === "menu icon") return
+            if (isMobile && menuRef.current && !menuRef.current.contains(event.target as Node)) {
+                setIsOpen(() => false)
             }
         }
         document.addEventListener("mousedown", handleClickOutside)
@@ -57,7 +53,7 @@ export const Header = () => {
                         <Link href="/">@halvaradop/tailwindcss</Link>
                     </h2>
                 </div>
-                <div ref={menuRef} style={{ display: "contents" }}>
+                <div ref={menuRef}>
                     <AnimatePresence mode="wait">{isOpen && <HeaderMenu onLinkClick={handleMenuLinkClick} />}</AnimatePresence>
                 </div>
             </nav>
@@ -66,7 +62,7 @@ export const Header = () => {
                 variant="ghost"
                 onClick={handleToggleMenu}
             >
-                <Image className="hover:cursor-pointer" src={menu} alt="menu icon" />
+                <Image className="hover:cursor-pointer" src={menu} alt="menu icon" aria-description="menu icon" />
             </Button>
             <figure className="group w-10 h-16 hidden img:transition-transform img:ease-linear img:duration-300 hover:cursor-pointer base:w-16 base:flex base:items-center base:justify-center base:relative base:overflow-hidden">
                 <Image