<nav
  class="mobile-bottom-nav"
  [class.entrance]="isEntrance()"
  (animationend)="onEntranceAnimationEnd($event)"
>
  <button
    mat-button
    class="nav-button"
    [routerLink]="todayRoute"
    routerLinkActive="active"
    [routerLinkActiveOptions]="{ exact: false }"
  >
    <mat-icon>wb_sunny</mat-icon>
  </button>

  <button
    mat-button
    class="nav-button"
    routerLink="/planner"
    routerLinkActive="active"
  >
    <mat-icon>edit_calendar</mat-icon>
  </button>

  <button
    mat-fab
    class="add-task-button"
    [class.smaller]="hasProjectBacklog()"
    [class.hide-for-native]="isEntranceAnimating()"
    color="primary"
    (click)="showAddTaskBar()"
  >
    <mat-icon>add</mat-icon>
  </button>

  @if (hasSidePanelMenuItems()) {
    <button
      mat-button
      class="nav-button"
      [matMenuTriggerFor]="panelsMenu"
      [attr.aria-label]="T.MH.SIDE_PANEL_MENU | translate"
    >
      <mat-icon>bottom_panel_open</mat-icon>
    </button>
  }

  <button
    mat-button
    class="nav-button"
    (click)="toggleMobileNav()"
  >
    <mat-icon>menu</mat-icon>
  </button>
</nav>

<mat-menu
  #panelsMenu="matMenu"
  class="mobile-bottom-nav-panels-menu"
>
  @for (button of sidePanelButtons(); track button.pluginId) {
    <button
      mat-menu-item
      (click)="onPluginButtonClick(button)"
      [class.active]="activePluginId() === button.pluginId && isShowPluginPanel()"
    >
      <plugin-icon
        [pluginId]="button.pluginId"
        [fallbackIcon]="button.icon || 'extension'"
      ></plugin-icon>
      <span>{{ button.label }}</span>
    </button>
  }

  @if (isIssuesPanelEnabled()) {
    <button
      mat-menu-item
      class="e2e-toggle-issue-provider-panel"
      [disabled]="!isRouteWithSidePanel()"
      [class.active]="isShowIssuePanel()"
      (click)="toggleIssuePanel()"
    >
      <mat-icon>webhook</mat-icon>
      <span>{{ T.BN.SHOW_ISSUE_PANEL | translate }}</span>
    </button>
  }

  @if (isProjectNotesEnabled()) {
    <button
      mat-menu-item
      class="e2e-toggle-notes-btn"
      [disabled]="!isRouteWithSidePanel()"
      [class.active]="isShowNotes()"
      (click)="toggleNotes()"
    >
      <mat-icon>comment</mat-icon>
      <span>{{ T.BN.SHOW_NOTES | translate }}</span>
    </button>
  }
</mat-menu>
