How do I make the navbar disappear when I click away

Question

I have followed this tutorial for a responsive navbar, but if you click anywhere else on mobile mode the navbar wont disappear, im pretty beginner with coding so I have no idea how to fix it.

function NavBar(){

const [ showNav, setShowNav] = useState(false);

const scrollUp = () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    })
}


return(
    <nav className="md:flex justify-between items-center bg-red-900 sticky top-0 z-20 p-4 text-white">
        <div className="flex items-center justify-between">
            <a href="">
                <p></p>
            </a>
            {showNav ? (
            <HiOutlineMenuAlt3 
            onClick={() => setShowNav(!showNav)} 
            className="md:hidden block w-10 h-10 p-2 cursor-pointer"/>) : (
            <HiOutlineMenuAlt2 
            onClick={() => setShowNav(!showNav)} 
            className="md:hidden block w-10 h-10 p-2 cursor-pointer"/>)}
        </div>
        <ul className={(showNav ? "right-0" : '-right-full') + " md:static fixed bottom-0 top-12 md:flex md:space-x-7 items-center md:bg-transparent bg-red-800 bg-opacity-90 md:w-auto w-10/12 md:text-white text-white md:space-y-0 space-y-5 p-8 md:p-2 transition-right rounded-xl"}>
            <li className="hover:bg-red-600 hover:shadow-xl rounded-xl p-2 flex items-center w-24">
                <Link className="flex flex-row" onClick={scrollUp} to="/">Home<HiHome className="ml-2 mt-1"/></Link>
            </li>
            <li className="hover:bg-red-600 hover:shadow-xl rounded-xl p-2 flex items-center w-24">
                <Link className="flex flex-row" onClick={scrollUp} to="/about">About<HiUser  className="ml-2 mt-1" /></Link>
            </li>
            <li className="hover:bg-red-600 hover:shadow-xl rounded-xl p-2 flex items-center w-24">
                <Link className="flex flex-row" onClick={scrollUp} to="/projects">Projects<HiFolder  className="ml-2 mt-1"/></Link>
                
            </li>
            <li className="hover:bg-red-600 hover:shadow-xl rounded-xl p-2 flex items-center w-24">
                <Link className="flex flex-row" onClick={scrollUp} to="/contact">Contact<HiMail  className="ml-2 mt-1"/></Link>
                
            </li>
        </ul>
    </nav>
    
);

}

export default NavBar;

https://www.youtube.com/watch?v=Ww9oyQuS7rA

the creator mentioned something about useEffect in the nav component but I have no idea how to implement it.

Have you already tried something like https://stackoverflow.com/questions/32553158/detect-click-outside-react-component ? — Rastafan, Jun 03 '22 at 07:50

score 0 · Answer 1 · edited Jun 03 '22 at 12:43

One way to do this is to wrap the content of your page in a div that has an onClick which always changes the setShowNav to false. This way, everytime you click on anything else but the NavBar, the NavBar closes.

I've created a very simple example in codesandbox for you to look at: https://codesandbox.io/embed/elated-chihiro-fz889t

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [open, setOpen] = useState(false);
  const handleClickAway = () => {
    setOpen(false);
    console.log("clicked away");
  };

  const handleClick = () => {
    setOpen(!open);
    console.log("clicked");
  };

  return (
    <>
      <div onClick={handleClickAway} style={{ backgroundColor: "red" }}>
        Content - clicking on this will close the navbar if open
      </div>
      <div>
        <button type="button" onClick={handleClick}>
          Show NavBar button
        </button>
        {open ? <p>The NavBar</p> : null}
      </div>
    </>
  );
}

How do I make the navbar disappear when I click away

1 Answers1