@if (overflowButton) {
  <li
    #buttonMoreElement
    #overflowButton
    class="po-header-nav-submenu-more"
    tabindex="0"
    (click)="openListButtonMore()"
    (keydown)="onKeyDownButtonMore($event)"
  >
    <div
      role="button"
      [attr.aria-expanded]="poPopupElement?.showPopup"
      class="po-header-nav-submenu-button-more"
      [class.open]="poPopupElement?.showPopup"
    >
      <span>{{ literals.more }}</span>
      <po-icon
        class="po-header-icon po-header-nav-submenu-more-icon"
        [p-icon]="poPopupElement?.showPopup ? 'ICON_ARROW_UP' : 'ICON_ARROW_DOWN'"
      ></po-icon>
    </div>
  </li>
} @else {
  <li
    #menusubmenuitem
    tabindex="0"
    [p-tooltip]="item?.label"
    class="po-header-nav-submenu"
    (click)="onAction(item)"
    (keydown)="onKeyDownButtonList($event, item)"
    [attr.aria-current]="selectedItem"
  >
    <div
      class="po-header-nav-submenu-button"
      [attr.aria-selected]="item?.$selected"
      [class.submenu-item-selected]="selectedItem"
    >
      <span>{{ item?.label }}</span>
    </div>
  </li>
}

@if (overflowButton) {
  <po-popup
    #popup
    p-size="medium"
    [p-actions]="itemOverFlow"
    [p-target]="buttonMoreElement"
    [p-hide-arrow]="true"
    (p-click-item)="onAction($event, false)"
    (p-close)="onClosePopup()"
  >
  </po-popup>
}