

<ng-container *transloco="let t; prefix:'nav-header'">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">{{t('nav-link-header')}}</h4>
    <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()"></button>
  </div>
  <div class="modal-body">

    <div class="mb-3">
      <a [routerLink]="profileLink()" [fragment]="'stats-tab'">{{t('my-profile')}}</a>
    </div>

    <div class="mb-3">
      <a routerLink="/settings" [fragment]="SettingsTabId.Preferences" (click)="closeIfOnSettings()" [title]="t('settings')">{{t('settings')}}</a>
    </div>

    @for (navItem of navService.navItems; track $index) {
      <div class="mb-3">
        @if (navItem.routerLink) {
          <a [routerLink]="navItem.routerLink" [fragment]="navItem.fragment">{{t(navItem.transLocoKey)}}</a>
        } @else if (navItem.href) {
          <a [href]="navItem.href" rel="noopener noreferrer" target="_blank">{{t(navItem.transLocoKey)}}</a>
        } @else if (navItem.click) {
          <a href="javascript:void(0);" (click)="navItem.click()">{{t(navItem.transLocoKey)}}</a>
        }
      </div>
    }
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="close()">{{t('close')}}</button>
  </div>

</ng-container>
