My header includes an off-canvas menu that slides in from the right side. Everything seems to be working fine, except for one issue: when the menu is open and visible, the mouse and touch events pass through it to the content underneath.
Check out the code snippet below:
import { forwardRef, useCallback, useEffect, useRef, useState } from "react"
import Link from "next/link"
// JavaScript code...
export default LandingHeader
LandingHeader.displayName = "LandingHeader"
I haven't created an off-canvas menu by hand in quite a while, so there might be something I'm overlooking here.