umami/components/settings/SettingsButton.js

import React, { useRef, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import TimezoneSetting from './TimezoneSetting';
import DateRangeSetting from './DateRangeSetting';
import Button from 'components/common/Button';
import styles from './SettingsButton.module.css';
import Gear from 'assets/gear.svg';
import useDocumentClick from '../../hooks/useDocumentClick';

export default function SettingsButton() {
  const [show, setShow] = useState(false);
  const ref = useRef();

  function handleClick() {
    setShow(state => !state);
  }

  useDocumentClick(e => {
    if (!ref.current?.contains(e.target)) {
      setShow(false);
    }
  });

  return (
    <div className={styles.button} ref={ref}>
      <Button icon={<Gear />} variant="light" onClick={handleClick} />
      {show && (
        <div className={styles.panel}>
          <dt>
            <FormattedMessage id="label.timezone" defaultMessage="Timezone" />
          </dt>
          <dd>
            <TimezoneSetting />
          </dd>
          <dt>
            <FormattedMessage id="label.default-date-range" defaultMessage="Default date range" />
          </dt>
          <dd>
            <DateRangeSetting />
          </dd>
        </div>
      )}
    </div>
  );
}