OpenTournament/tournament-frontend/src/UserMenu.js

import React, { useState, useRef, useEffect } from 'react';
import './UserMenu.css';

const UserMenu = ({ onSelect, token, onResetTournament, tournamentStarted }) => {
  const [open, setOpen] = useState(false);
  const menuRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  const handleSelect = (option) => {
    setOpen(false);
    if (onSelect) onSelect(option);
  };

  return (
    <div className="user-menu" ref={menuRef}>
      <button className="user-menu-btn" onClick={() => setOpen(!open)}>
        Admin Menu &#x25BC;
      </button>
      {open && (
        <ul className="user-menu-dropdown">
          {!token ? (
            <li onClick={() => handleSelect('profile')}>Login</li>
          ) : (
            <>
              <li onClick={() => handleSelect('create-tournament')}>Create tournament</li>
              <li onClick={() => handleSelect('load-tournaments')}>Load tournaments</li>
              <li
                className={`start-tournament-option${tournamentStarted ? ' disabled' : ''}`}
                onClick={tournamentStarted ? undefined : () => handleSelect('start-tournament')}
                style={tournamentStarted ? { cursor: 'not-allowed', opacity: 0.6, position: 'relative' } : {}}
                {...(tournamentStarted ? { 'data-tooltip': 'The tournament has already started. You cannot start it again.' } : {})}
              >
                Start tournament
                {tournamentStarted && (
                  <span className="tooltip-text">The tournament has already started. You cannot start it again.</span>
                )}
              </li>
              <li onClick={() => handleSelect('logout')}>Logout</li>
              <li style={{ color: '#b91c1c', fontWeight: 'bold' }} onClick={() => { setOpen(false); if (onResetTournament) onResetTournament(); }}>Reset Tournament</li>
            </>
          )}
        </ul>
      )}
    </div>
  );
};

export default UserMenu;