<ion-menu id="sideNav" [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <div class="user-info" *ngIf="user" (click)="showProfile(user.id)" menuClose>
      <div class="user-banner" [style.background]="'url('+ banner +')'">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
          viewBox="0 0 300 100" xml:space="preserve" width="100%" class="svg-triangle">
          <polygon points="0,75  0,100 300,100 300,99" fill="#FFFFFF" />
        </svg>
        <img src="{{ user.profile_image_url_https | highResolution }}" alt="User" class="user-avatar">
      </div>
      <div class="user-info">
        {{user.name}}<br><span class="handle">@{{user.screen_name}}</span>
      </div>
    </div>
    <ion-list>
      <button menuClose ion-item no-padding icon-start *ngFor="let page of pages" (click)="openPage(page)">
        <ion-icon name="{{page.icon}}"></ion-icon>{{page.title}}
      </button>
      <button menuClose ion-item no-padding icon-start (click)="logout()">
        <ion-icon name="log-out"></ion-icon>Logout
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

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