"use client"; import React, { useEffect, useRef, useState } from "react"; import Image from "next/image"; import { FiChevronDown, FiUser, FiSettings, FiCommand, FiBriefcase, FiPlus, FiGitPullRequest, FiLogOut, FiHelpCircle, FiSlack, FiMessageSquare, FiCode, } from "react-icons/fi"; export default function UserMenu() { const [dropdownOpen, setDropdownOpen] = useState(false); const trigger = useRef(null); const dropdown = useRef(null); // close on click outside useEffect(() => { const clickHandler = (event: MouseEvent) => { const target = event.target as Node; if (!dropdown.current) return; if ( !dropdownOpen || dropdown.current.contains(target) || (trigger.current && trigger.current.contains(target)) ) return; setDropdownOpen(false); }; document.addEventListener("click", clickHandler); return () => document.removeEventListener("click", clickHandler); }); // close if the esc key is pressed useEffect(() => { const keyHandler = (event: KeyboardEvent) => { if (!dropdownOpen || event.keyCode !== 27) return; setDropdownOpen(false); }; document.addEventListener("keydown", keyHandler); return () => document.removeEventListener("keydown", keyHandler); }); return (
setDropdownOpen(true)} onBlur={() => setDropdownOpen(false)} className={`absolute right-0 top-full w-[240px] divide-y divide-stroke overflow-hidden rounded-lg bg-white ${ dropdownOpen ? "block" : "hidden" }`} >
account

Andrio Miller

miller@company.com

); }