<div class="header-menu-container">
  <div
    class="header-menu-item"
    *ngFor="let item of menuList"
    (click)="onSelect(item)"
    [ngClass]="{ 'menu-selected-item': item === selectedItem }"
  >
    <a *ngIf="item.href" class="menu-link" [href]="item.href" rel="noopener noreferrer" [target]="item.target ? item.target : '_blank'">
      <div class="logo" [innerHTML]="item.icon | safe: 'html'"></div>
      <div class="text">{{ curLanguage === 'zh-cn' ? item.name : item.enName }}</div>
    </a>
    <div
      *ngIf="!item.href"
      dDropDown
      appendToBody
      
      [appendToBodyDirections]="[{ originX: 'start', originY: 'center', overlayX: 'start', overlayY: 'top', offsetX: 50, offsetY: -16 }]"
      [trigger]="'click'"
    >
      <div class="logo" [innerHTML]="item.icon | safe: 'html'" dDropDownToggle></div>
      <div class="text">{{ curLanguage === 'zh-cn' ? item.name : item.enName }}</div>
      <div dDropDownMenu class="devui-scrollbar menu-list-wrapper">
        <div class="menu-lists" [ngClass]="{ 'menu-lists-specifications': item.name === '开发规范' }">
          <div class="menu-list" *ngFor="let itemInList of item.children">
            <div class="menu-list-title" *ngIf="itemInList.name">
              {{ curLanguage === 'zh-cn' ? itemInList.name : itemInList.enName }}
            </div>
            <ul class="menu-sublist">
              <li class="menu-sublist-item" *ngFor="let itemInSubList of itemInList.children">
                <a
                  *ngIf="itemInSubList.href"
                  [href]="itemInSubList.href"
                  rel="noopener noreferrer"
                  [target]="itemInSubList.target ? itemInSubList.target : '_blank'"
                >
                <ng-container *ngIf="item.name === '开发规范'">
                  <span class="menu-sublist-title">{{ curLanguage === 'zh-cn' ? itemInSubList.name : itemInSubList.enName }}</span>
                  <span
                    class="menu-sublist-description"
                    *ngIf="itemInSubList.description"
                    title="{{ curLanguage === 'zh-cn' ? itemInSubList.description : itemInSubList.enDescription }}"
                  >
                    {{ curLanguage === 'zh-cn' ? itemInSubList.description : itemInSubList.enDescription }}
                  </span>
                </ng-container>
                <div class="menu-ecology-container" *ngIf="item.name !== '开发规范'">
                  <div class="ecology-icon-container" [innerHTML]="itemInSubList.icon | safe: 'html'"></div>
                  <div class="ecology-desc-container">
                    <p class="menu-sublist-title">{{ curLanguage === 'zh-cn' ? itemInSubList.name : itemInSubList.enName }}</p>
                    <p
                      class="menu-sublist-description"
                      *ngIf="itemInSubList.description"
                      title="{{ curLanguage === 'zh-cn' ? itemInSubList.description : itemInSubList.enDescription }}"
                    >{{ curLanguage === 'zh-cn' ? itemInSubList.description : itemInSubList.enDescription }}
                  </p>
                  </div>
                </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>