Ionic Angular Split Plane One Header on Tablet View

Question

I am using Ionic Angular split plane for menu navigation. Is it possible to have just one header using split plane? I just want Vehicles to be the header. My concern is using split plane seems to be preventing that because it is two different pages. I have thought about creating a separate header component but not sure if that is the correct approach.

menu.page.html

<ion-split-pane when="md" contentId="content">
  <ion-menu contentId="content">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Vehicles</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle autoHide="false" *ngFor="let p of pages">
          <ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath === p.url">
            {{ p.title }}
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

boat.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Boats</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <h2 class="ion-text-center">Boats</h2>

</ion-content>