通过单击或点击外部关闭移动菜单

Question

The code is for mobile menu but when I open it, it stays open and won't close.
I want it to close by clicking the menu links and tapping outside.
I know I haven't even added in the code but I don't know how to add into it.
Can anyone help me with the code? Any help is appreciated!

Here is the code:

 import { useState } from "react"; import { HiMenuAlt3, HiX } from "react-icons/hi"; export default function NavBar() { const [navbar, setNavbar] = useState(false); return ( <nav className="w-full bg-white shadow"> <div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8"> <div> <div className="flex items-center justify-between py-3 md:py-5 md:block"> <a href="javascript:void(0)"> <h2 className="text-2xl font-bold">LOGO</h2> </a> <div className="md:hidden"> <button className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border" onClick={() => setNavbar(?navbar)} > {navbar: ( <HiX className="text-4xl" /> // Close icon ): ( <HiMenuAlt3 className="text-4xl" /> // Open icon )} </button> </div> </div> </div> <div> <div className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md?mt-0 ${ navbar: "block": "hidden" }`} > <ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0"> <li className="text-gray-600 hover:text-blue-600"> <a href="javascript:void(0)">Home</a> </li> <li className="text-gray-600 hover:text-blue-600"> <a href="javascript:void(0)">Blog</a> </li> <li className="text-gray-600 hover:text-blue-600"> <a href="javascript:void(0)">About US</a> </li> <li className="text-gray-600 hover:text-blue-600"> <a href="javascript;void(0)">Contact US</a> </li> </ul> </div> </div> </div> </nav> ); }

Answer 1

You do have code to close it, setNavbar(false) . What you need is a hooked called useOnClickOutside . https://usehooks.com/useOnClickOutside/

To use it,

function NavBar() {
  const ref = useRef()
  useOnClickOutside(ref, () => setNavbar(false));

  return (
    <nav ref={ref}>
      ...
    </nav>
  )
}