<!--<ion-split-pane> -->

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

      <ion-content class="outer-content">

        <ion-list>
          <ion-list-header>
            Account
          </ion-list-header>
            <button ion-item menuClose ion-item *ngFor="let p of loggedOutPages" (click)="openPage(p)">
              <ion-icon item-left [name]="p.icon" [color]="isActive(p)"></ion-icon>
              {{p.title}}
            </button>
        </ion-list>

        <ion-list>
          <ion-list-header>
            About
          </ion-list-header>
            <button ion-item menuClose ion-item *ngFor="let p of aboutPages" (click)="openPage(p)">
              <ion-icon item-left [name]="p.icon" [color]="isActive(p)"></ion-icon>
              {{p.title}}
            </button>
        </ion-list>

    </ion-content>

     </ion-menu> 


<!-- LOGGED IN MENU WITH PROFILE PHOTO -->


 <ion-menu id="loggedInMenu" [content]="content"> 
        
      <ion-header class="menu-header">
        <img class="user-avatar round" [src]="chosenPicture" onerror="this.src='assets/img/profile/default-profile.jpg'"
        />
        <p class="name">{{username}} &bull; {{occupation}}</p>
        <p class="e-mail">{{email}}</p>
      </ion-header>

      <ion-content class="outer-content">

        <ion-list>
            <button ion-item menuClose ion-item *ngFor="let p of loggedInPages" (click)="openPage(p)">
              <ion-icon item-left [name]="p.icon" [color]="isActive(p)"></ion-icon>
              {{p.title}}
            </button>
        </ion-list>

         <ion-list>
          <ion-list-header>
            Account
          </ion-list-header>
            <button ion-item menuClose ion-item *ngFor="let p of accountPages" (click)="openPage(p)">
              <ion-icon item-left [name]="p.icon" [color]="isActive(p)"></ion-icon>
              {{p.title}}
            </button>
        </ion-list>

        <ion-list>
          <ion-list-header>
            About
          </ion-list-header>
            <button ion-item menuClose ion-item *ngFor="let p of aboutPages" (click)="openPage(p)">
              <ion-icon item-left [name]="p.icon" [color]="isActive(p)"></ion-icon>
              {{p.title}}
            </button>
        </ion-list> 

    </ion-content>

     </ion-menu> 


<!-- LOGGED IN MENU WITH OUT PROFILE PHOTO -->


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

        <ion-content class="outer-content">

          <ion-list>
            <button ion-item menuClose ion-item *ngFor="let p of loggedInPages" (click)="openPage(p)">
              <ion-icon item-left [name]="p.icon" [color]="isActive(p)"></ion-icon>
              {{p.title}}
            </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>

<!--</ion-split-pane>-->