Add an avatar in the header

Ionic Framework ionic-v3
1

I am trying to add an avatar to the header but the buttons on the far right seems to get in the way.

The code:

<ion-header>
  <ion-navbar>
    <ion-item>
      <ion-avatar item-left>
        <img [src]="user.avatar">
      </ion-avatar>
      <h2>Marty McFly</h2>
    </ion-item>
    <ion-buttons end>
      <button ion-button icon-only [navPush]="eventAddPage">
        <ion-icon name="add"></ion-icon>
      </button>
      <button ion-button icon-only (click)="logOut()">
        <ion-icon name="log-out"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
  <ion-segment [(ngModel)]="gmap">
    <ion-segment-button value="map">
      Map
    </ion-segment-button>
    <ion-segment-button value="list">
      Events
    </ion-segment-button>
  </ion-segment>
</ion-header>

Is there a better way of implementing the header?

1 Like