<nav class="bottom-nav" aria-label="Bottom navigation">
  @for (dest of destinations; track dest.route) {
    <a
      class="bottom-nav__item"
      [routerLink]="dest.route"
      routerLinkActive="bottom-nav__item--active"
      #rla="routerLinkActive"
      [attr.aria-label]="dest.label"
      [attr.aria-current]="rla.isActive ? 'page' : null"
    >
      <span class="bottom-nav__icon-wrapper">
        <mat-icon
          [matBadge]="dest.badge ?? 0"
          [matBadgeHidden]="!dest.badge"
          matBadgePosition="above after"
          matBadgeSize="small"
        >
          {{ dest.icon }}
        </mat-icon>
      </span>
      <span class="bottom-nav__label">{{ dest.label }}</span>
    </a>
  }
</nav>