diff --git a/src/components/ui/ContextMenu.tsx b/src/components/ui/ContextMenu.tsx index 6830874..c871c98 100644 --- a/src/components/ui/ContextMenu.tsx +++ b/src/components/ui/ContextMenu.tsx @@ -1,6 +1,6 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {faCheck, faTrash, faUser} from "@fortawesome/free-solid-svg-icons"; -import React, {useContext, useState} from "react"; +import React, {useContext, useEffect, useRef, useState} from "react"; import "./ContextMenu.scss" import LoginButton from "./account/LoginButton"; import {UserContext} from "../context/UserContext"; @@ -16,10 +16,31 @@ const ContextMenu = () => { const { name, picture } = useContext(UserContext); + const ref: any = useRef("contextMenu"); + + function useClickOutside(ref: any, onClickOutside: any) { + useEffect(() => { + + function handleClickOutside(event: { target: any; }) { + if (ref.current && !ref.current.contains(event.target)) { + onClickOutside(); + } + } + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + + }, [ref, onClickOutside]); + } + useClickOutside(ref, () => { + setUtilitiesOpen(false); + }); + return (
-
setUtilitiesOpen(!utilitiesOpen) }> +
setUtilitiesOpen(!utilitiesOpen) } ref={ref}> {picture !== "" && ( {""}/ )}