Tengo un dropdown que contiene un botón para cerrar sesión, el dropdown lo muestro y lo oculto haciendo click en un botón en el header, pero necesito también ocultarlo cuando de click en cualquier parte de la página excepto el boton de logout, ¿Como puedo hacer esto? Hasta ahora tengo mi código así:
import React, {useState} from "react";
import "./HeaderBar.css";
import Logout_Icon from "../../assets/images/authorization/icons/close_app.svg";
function HeaderBar() {
const [logoutVisible, setLogoutVisible] = useState(false);
return (
<header id="NavHead">
<nav className="HeaderBar">
<button onClick={() => setLogoutVisible(!logoutVisible)}>Click</button>
<ul style={{ display: logoutVisible ? "inline-flex" : "none" }}>
<li>Cerrar sesión</li>
</ul>
</nav>
</header>
);
}
export default HeaderBar;
click
o de key del DOM, y si el seleccionado no es el que quieres lo escondes.