Ionic React: ионное меню с несколькими подменю

Рабочий пример с переключением действий открытия и закрытия подменю

Чтобы добавить несколько подменю в меню с помощью Ionic, нам нужно создать функцию для события onClick элемента IonItemDivider и соответствующим образом установить состояние.

interface HideSubMenu {
  [key: string]: boolean;
}

const FindEventsMenu: React.FC = () => {
  const [subMenu, setSubMenu] = useState<HideSubMenu>({});

  function toggleSubMenu(sport: string) {
    setSubMenu((value) => {
      return { ...value, [sport]: !value[sport] };
    });
  }

  return (
    <IonMenu menuId="find-events-menu" side="start" contentId="main-content">
      <IonHeader>
        <IonToolbar color="tertiary">
          <IonTitle>Find Events</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-no-padding">
        <IonItemGroup>
          <IonItemDivider onClick={() => toggleSubMenu('Volleyball')}>
            <IonLabel>Volleyball</IonLabel>
            <IonIcon slot="end" color="medium" ios={chevronDownOutline} md={chevronDownSharp} />
          </IonItemDivider>
          <IonMenuToggle hidden={subMenu['Volleyball']} autoHide={false}>
            <IonItem lines="full" detail={true}>
              <IonIcon slot="start" ios={peopleCircleOutline} md={peopleCircleSharp} />
              <IonLabel>Pick-ups</IonLabel>
            </IonItem>
          </IonMenuToggle>
          <IonMenuToggle hidden={subMenu['Volleyball']} autoHide={false}>
            <IonItem lines="full" detail={true}>
              <IonIcon slot="start" ios={trophyOutline} md={trophySharp} />
              <IonLabel>Leagues</IonLabel>
            </IonItem>
          </IonMenuToggle>
          <IonMenuToggle hidden={subMenu['Volleyball']} autoHide={false}>
            <IonItem lines="full" detail={true}>
              <IonIcon slot="start" ios={medalOutline} md={medalSharp} />
              <IonLabel>Tournaments</IonLabel>
            </IonItem>
          </IonMenuToggle>
          <IonMenuToggle hidden={subMenu['Volleyball']} autoHide={false}>
            <IonItem lines="full" detail={true}>
              <IonIcon slot="start" ios={fitnessOutline} md={fitnessSharp} />
              <IonLabel>Clinics</IonLabel>
            </IonItem>
          </IonMenuToggle>
          <IonItemDivider onClick={() => toggleSubMenu('Football')}>
            <IonLabel>Football</IonLabel>
            <IonIcon slot="end" color="medium" ios={chevronDownOutline} md={chevronDownSharp} />
          </IonItemDivider>
          <IonMenuToggle hidden={subMenu['Football']} autoHide={false}>
            <IonItem lines="full" detail={true}>
              <IonIcon slot="start" ios={peopleCircleOutline} md={peopleCircleSharp} />
              <IonLabel>Pick-ups</IonLabel>
            </IonItem>
          </IonMenuToggle>
          <IonMenuToggle hidden={subMenu['Football']} autoHide={false}>
            <IonItem lines="full" detail={true}>
              <IonIcon slot="start" ios={trophyOutline} md={trophySharp} />
              <IonLabel>Leagues</IonLabel>
            </IonItem>
          </IonMenuToggle>
          <IonMenuToggle hidden={subMenu['Football']} autoHide={false}>
            <IonItem lines="full" detail={true}>
              <IonIcon slot="start" ios={medalOutline} md={medalSharp} />
              <IonLabel>Tournaments</IonLabel>
            </IonItem>
          </IonMenuToggle>
          <IonMenuToggle hidden={subMenu['Football']} autoHide={false}>
            <IonItem lines="full" detail={true}>
              <IonIcon slot="start" ios={fitnessOutline} md={fitnessSharp} />
              <IonLabel>Clinics</IonLabel>
            </IonItem>
          </IonMenuToggle>
          <IonItemDivider>
            <IonLabel>Events</IonLabel>
          </IonItemDivider>
          <IonMenuToggle autoHide={false}>
            <IonItem lines="full" detail={true}>
              <IonIcon slot="start" ios={balloonOutline} md={balloonSharp} />
              <IonLabel>Parties</IonLabel>
            </IonItem>
          </IonMenuToggle>
        </IonItemGroup>
      </IonContent>
    </IonMenu>
  );
};