This repository has no description
Something went wrong. Try again.
1.4 kB · 41 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142'use client'
import { useEffect } from 'react'
export function MobileMenuToggle() { useEffect(() => { function wireMenu() { const toggle = document.querySelector('.menu-toggle') as HTMLButtonElement | null const menu = document.getElementById('mobile-menu') if (!toggle || !menu) return
function handleClick() { const isOpen = toggle!.classList.toggle('is-open') menu!.classList.toggle('is-open', isOpen) toggle!.setAttribute('aria-expanded', isOpen ? 'true' : 'false') toggle!.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu') menu!.setAttribute('aria-hidden', isOpen ? 'false' : 'true') }
toggle.addEventListener('click', handleClick) return () => toggle.removeEventListener('click', handleClick) }
const cleanup = wireMenu() return cleanup }, [])
return ( <button type="button" className="menu-toggle flex cursor-pointer flex-col gap-1 border-0 bg-transparent p-2 md:hidden" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu" > <span className="bg-ink block h-px w-[22px] transition-all"></span> <span className="bg-ink block h-px w-[22px] transition-all"></span> <span className="bg-ink block h-px w-[22px] transition-all"></span> </button> )}