<ion-split-pane contentId="main">
  <ion-menu menuId="main" contentId="main" type="overlay" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>
          <img src="assets/imgs/logo.png" alt="" />
          <span class="text">StApps</span>
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list *ngFor="let category of menu">
        <ion-list-header *ngIf="category.name !== ''">
          <ion-label>
            {{ category.translations[language].name | titlecase }}
          </ion-label>
        </ion-list-header>
        <ion-menu-toggle auto-hide="false" *ngFor="let item of category.items">
          <ion-item [routerDirection]="'root'" [routerLink]="[item.route]">
            <ion-icon slot="end" [name]="item.icon"></ion-icon>
            <ion-label>
              {{ item.translations[language].title | titlecase }}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>
