MenuBar.jsx

import React from "react";
import {
  useMenuState,
  useMenuBarState,
  Menu as MenuBase,
  MenuBar as MenuBarBase,
  MenuButton,
  MenuItem,
  MenuItemRadio,
  MenuItemCheckbox,
  MenuGroup,
  MenuSeparator,
} from "reakit/Menu";
import { menu, initialValues } from "./menu";

function Menu({ label, children, values, onChange ...props }, ref) {
  const state = useMenuState({ values, setValues: onChange });
  return (
    <React.Fragment>
      <MenuButton state={state} ref={ref} {...props}>
        {label}
      </MenuButton>
      <MenuBase state={state} aria-label={label}>
        {children}
      </MenuBase>
    </React.Fragment>
  );
}

Menu = React.forwardRef(Menu);

function MenuBar({ values, onChange, ...props }, ref) {
  const state = useMenuBarState({ values, setValues: onChange });
  return <MenuBarBase state={state} ref={ref} {...props} />;
}

MenuBar = React.forwardRef(MenuBar);

function renderItems(items, values, setValues) {
  return items.map((item) => {
    switch (item.type) {
      case "separator":
        return <MenuSeparator />;
      case "group":
        return <MenuGroup>{renderItems(item.items)}</MenuGroup>;
      case "radio":
        return (
          <MenuItemRadio name={item.name} value={item.value}>
            {item.label}
          </MenuItemRadio>
        );
      case "checkbox":
        return (
          <MenuItemCheckbox name={item.name} value={item.value}>
            {item.label}
          </MenuItemCheckbox>
        );
      case default: {
        if (item.items) {
          return (
            <MenuItem
              as={Menu}
              label={item.label}
              values={values}
              onChange={setValues}
            >
              {renderItems(item.items)}
            </MenuItem>
          );
        }
        return <MenuItem>{item.label}</MenuItem>;
      }
    }
  });
}

function ChromeMenuBar() {
  const [values, setValues] = React.useState(initialValues);
  return (
    <MenuBar values={values} onChange={setValues}>
      {renderItems(menu, values, setValues)}
    </MenuBar>
  );
}