<ion-tabs (ionTabsWillChange)="onTabsWillChange($event)">
  <ion-tab-bar slot="bottom" id="myTabBar" style="padding-top: 5px;">
    <ion-tab-button tab="home">
      <ion-icon name="home-outline" style="font-size: 32px;"></ion-icon>
      <ion-label>{{ 'HOME' | translate }}</ion-label>
    </ion-tab-button>

    <ion-tab-button *ngFor="let section of sectionService.sections | enableTabs" [tab]="section.tab"
      [disabled]="section.isDisabled">
      <ion-icon class="icon-size" name="help-circle-outline" *ngIf="!section.icon_name"></ion-icon>
      <ion-icon class="icon-size" [name]="section.icon_name" *ngIf="section.icon_name"></ion-icon>
      <ion-label>{{ section.name }}</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-icon name="grid-outline"></ion-icon>
      <ion-badge color="secondary" *ngIf="orderService._pendingOrders && orderService._pendingOrders.length">
        {{ orderService._pendingOrders.length }}</ion-badge>
      <ion-label>{{ 'SETTINGS_TITLE' | translate }}</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>