<ion-split-pane [when]="split.getSplitPane()" class="split">

  <ion-menu swipeEnabled="false" [content]="content" id="leftMenu" class="sidenav">
    <br><br>
    <div class="profile" *ngIf="user">
      <div class="image" [style.background-image]="'url(' + user.avatar + ')'" style="background-size: cover"></div>
      <div class="name">{{ user.first_name }} {{ user.last_name }} {{ user.company }}</div>
      <div class="scope" *ngIf="active">{{ active.name }} </div>
      <button (tap)="profile()" ion-button round color="light">MI PERFIL</button>
    </div>

    <div *ngFor="let p of pages" [hidden]="appInvite && p.inviteOff" class="link" [ngClass]="{'selected' : p.selected}" (tap)="openPage(p)">
      <span>{{p.title}}</span>
    </div>

    <div class="link" [ngClass]="{'selected' : selected}" (tap)="closeSession()">
      <span>Salir</span>
    </div>

    <div class="side-logo" style="text-align: left; padding: 20px; padding-top:0;">
      <hr />
      <img src="assets/img/logo-my.png" />
      <h1>Master Yoda<br />Derechos reservados<br />&copy; Chile</h1>
    </div>

  </ion-menu>

  <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
  <ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>

</ion-split-pane>