@customElement('my-app')
export class MyApp extends LitElement {
  @state()
  private items: MenuBarItem[] = [];

  private setting1 = false;
  private setting2 = true;
  private setting3 = false;

  connectedCallback(): void {
    super.connectedCallback();
    this.updateItems();
  }

  createMenuItem(text: string, state: boolean): HTMLElement {
    const item = document.createElement('vaadin-menu-bar-item');
    item.innerText = text + '-' + (state ? 'ON' : 'OFF');
    return item;
  }

  updateItems() {
    this.items = [
      {
        text: 'Menu',
        children: [
          {
            text: 'Settings',
            children: [
              {
                component: this.createMenuItem('Setting 1', this.setting1),
              },
              {
                component: this.createMenuItem('Setting 2', this.setting2),
              },
              {
                component: this.createMenuItem('Setting 3', this.setting3),
              },
            ],
          },
        ],
      },
    ];
  }

  render() {
    return html`<vaadin-menu-bar
      @item-selected="${(e: CustomEvent) => {
        this.setting1 = !this.setting1;
        this.updateItems();
      }}"
      .items=${this.items}></vaadin-menu-bar>`;
  }
}