import React, { useEffect, useRef, useState } from 'react'; export default function App() { const [open, setOpen] = useState(false); const boxRef = useRef(null); useEffect(() => { if (!open) return; function onDocClick(e) { if (!boxRef.current) return; if (!boxRef.current.contains(e.target)) setOpen(false); } document.addEventListener('mousedown', onDocClick); return () => document.removeEventListener('mousedown', onDocClick); }, [open]); return ( <div style={{ padding: 16 }}> <div ref={boxRef} style={{ display: 'inline-block', position: 'relative' }}> <button type='button' onClick={() => setOpen((v) => !v)} style={{ padding: '10px 14px', borderRadius: 12, border: '1px solid #ddd', background: '#fff' }}> meetcode menu </button> {open ? ( <div style={{ position: 'absolute', top: 'calc(100% + 8px)', left: 0, width: 220, borderRadius: 14, border: '1px solid #eee', background: '#fff', padding: 10 }}> <a href='#' style={{ display: 'block', padding: 8, color: '#124', textDecoration: 'none' }}>Topics</a> <a href='#' style={{ display: 'block', padding: 8, color: '#124', textDecoration: 'none' }}>Practice</a> </div> ) : null} </div> </div> ); }