Method render

core/src/components/menu/menu.tsx:831–867

()

  }

  render() {
    const { type, disabled, el, isPaneVisible, inheritedAttributes, side } = this;
    const mode = getIonMode(this);

    /**
     * If the Close Watcher is enabled then
     * the ionBackButton listener in the menu controller
     * will handle closing the menu when Escape is pressed.
     */
    return (
      <Host
        onKeyDown={shouldUseCloseWatcher() ? null : this.onKeydown}
        role="navigation"
        aria-label={inheritedAttributes['aria-label'] || 'menu'}
        class={{
          [mode]: true,
          [`menu-type-${type}`]: true,
          'menu-enabled': !disabled,
          [`menu-side-${side}`]: true,
          'menu-pane-visible': isPaneVisible,
          'split-pane-side': hostContext('ion-split-pane', el),
        }}
      >
        <div class="menu-inner" part="container" ref={(el) => (this.menuInnerEl = el)}>
          <slot></slot>
        </div>

        <ion-backdrop
          ref={(el) => (this.backdropEl = el)}
          class="menu-backdrop"
          tappable={false}
          stopPropagation={false}
          part="backdrop"
        />
      </Host>
    );
  }
}

const computeDelta = (deltaX: number, isOpen: boolean, isEndSide: boolean): number => {