<div [@listAnimation]="active" class="headers" [ngClass]="{ 'ipad-headers': isIPad }">
  <app-card *ngFor="let item of navigation" (click)="switch(item)">
    <span>{{ titles[item] }}</span>
  </app-card>
</div>
<div
  [ngSwitch]="active"
  [ngClass]="{
    'content-create-customer': active === 'create',
    content: active === 'search' || active === 'scan',
    'desktop-content-create-customer': active === 'create' && !isIPad,
    'desktop-content': (active === 'search' || active === 'scan') && !isIPad
  }"
>
  <div *ngSwitchCase="'search'" [@fadeIn]="active">
    <app-search-customer-card></app-search-customer-card>
  </div>
  <div *ngSwitchCase="'scan'" [@fadeIn]="active">
    <app-customer-card-barcode-search></app-customer-card-barcode-search>
  </div>
  <div *ngSwitchCase="'create'" [@fadeIn]="active">
    <app-create-customer-card></app-create-customer-card>
  </div>
</div>
