src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js

import '@material/web/iconbutton/standard-icon-button.js';
import '@material/web/menu/menu-button.js';
import '@material/web/menu/menu.js';
import '@material/web/menu/menu-item.js';

import {css, html, LitElement} from 'lit';
import {map} from 'lit/directives/map.js';
import {range} from 'lit/directives/range.js';

import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';

export default class TwptWorkflowsMenu extends LitElement {
  static styles = [
    SHARED_MD3_STYLES,
    css`
      .workflow-item {
        padding-inline: 1em;
      }
    `,
  ];

  renderMenuItems() {
    return map(
        range(8),
        i => html`
      <md-menu-item @click="${this._showWorkflow}" data-workflow-id="${
            i}"><span class="workflow-item" slot="start">Workflow ${
            i}</span></md-menu-item>
    `);
  }

  render() {
    // The button is based in the button created in the
    // addButtonToThreadListActions function in file ../../utils/common.js.
    return html`
      <md-menu-button>
        <md-standard-icon-button slot="button" icon="more_vert"></md-standard-icon-button>
        <md-menu slot="menu">
          ${this.renderMenuItems()}
        </md-menu>
      </md-menu-button>
    `;
  }

  _showWorkflow(e) {
    console.log(
        `Clicked workflow ${e.target.getAttribute('data-workflow-id')}.`);
  }
}
window.customElements.define('twpt-workflows-menu', TwptWorkflowsMenu);