Refactoring ion-navbar into custom component causing overlap

[bwhiting]

I noticed I had a lot of repeated code and functionality in my ion-navbar, so I thought it might be a good idea to create a custom component to factor it out. For some reason, this is causing problems where now the header/navbar is overlapping the status bar. I could just factor out a smaller part of code instead, but I’d like to understand why this is causing a problem.

custom navbar component html

<ion-navbar>
  <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>{{ title }}</ion-title>
  <ion-buttons end class="desktop-buttons">
    <button ion-button (click)="signIn()">
      <div>
        <ion-icon name="person" padding-right></ion-icon>
        <span>Sign In</span>
      </div>
    </button>
  </ion-buttons>
</ion-navbar>

custom navbar ts

import { Component, Input } from '@angular/core';
import { ModalController, ToastController } from 'ionic-angular';
import { LoginModalPage } from '../../pages/login-modal/login-modal';

@Component({
  selector: 'custom-nav',
  templateUrl: 'custom-nav.html'
})
export class CustomNavComponent {
  @Input() title;

  constructor(
    private toastCtrl: ToastController,
    private modalCtrl: ModalController) { }

  signIn() {
    const loginModal = this.modalCtrl.create(LoginModalPage);
    loginModal.present();
    loginModal.onDidDismiss(toast => {
      if (toast) {
        this.toastCtrl.create({
          message: toast,
          duration: 3000,
          position: 'bottom'
        }).present();
      }
    })
  }
}

usage:

<ion-header>
  <custom-nav [title]="'Search'"></custom-nav>
</ion-header>

screenshot: