Ionic avatar sidemenu

app.html

<!--Side Menu with avatar-->
<ion-menu [content]="content" id="menu-avatar">
  <ion-content>
    <div #header>
      <ion-row style="align-items:center;">
        <ion-col col-3>
          <img src="assets/icon/icon-email.svg" />
          <span class="icon-badge">4</span>
        </ion-col>
        <ion-col col-6>
          <img class="user-avatar round" [src]="chosenPicture || placeholder" onerror="this.src='assets/img/avatar/girl-avatar.png'"
          />
        </ion-col>
        <ion-col col-3>
          <img src="assets/icon/icon-calendar.svg" />
        </ion-col>
      </ion-row>
      <ion-row style="justify-content: center;">
        <h3>Paula Bolliger</h3>
      </ion-row>
    </div>
    <ion-list no-lines>
      <button menuClose ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
        <!--<ion-icon [name]="p.icon" item-left></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>

app.scss

// Sidemenu with avatar
#menu-avatar {
  .icon-badge {
    top: 0px;
    right: 0px;
    background: #FF5D5D;
    color: white;
    font-size: 12px;
    position: absolute;
    padding: 5px 8px;
    border-radius: 15px;
  }
  
  .user-avatar {
    padding: .5em;
  }
  h3,
  .label {
    color: white;
    font-weight: bold;
  }
  .item {
    background: transparent;
  }
  ion-content {
    background: linear-gradient(48deg, rgba(157, 72, 173, 0.8) 0%, rgba(157, 72, 173, 0.86) 28%, rgba(0, 168, 168, 0.98) 93%, rgba(0, 168, 168, 1) 100%);
  }
  .menu-inner {
    background: rgba(255, 255, 255, .3);
  }
}

// Material Design Sidemenu
#menu-material {
  .menu-header {
    padding: 5px 15px;
    background-image: url('../assets/img/misc/material-design-background.jpg');
    background-size: cover;
    color: white;
    .name {
      font-weight: 500;
      margin-bottom: 3px;
    }
    .e-mail {
      margin-top: 0;
      margin-bottom: 5px;
    }
  }
  .user-avatar {
    padding: .5em;
    height: 12vh;
  }
  h3,
  .label,
  {
    color: #999;
    font-weight: 400;
  }
  ion-icon {
    color: #777;
  }
}

Thank you so much, sir.