Split pane side menu blank when moved to seperate component

Ionic Framework Ionic Angular
1

Migrated my menu in the split pane into a separate component but now its blank. If I remove the wrapper its at least visible but doesnt work correctly.

There are no console errors. The menu is blank and I can toggle the button once to display it.

<ion-app *ngIf="!user">
  <ion-router-outlet id="main-content"></ion-router-outlet>
</ion-app>
<ion-app *ngIf="user">
  <ion-split-pane contentId="main-content">
    <app-main-menu></app-main-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

<ion-menu contentId="main-content" class="main-menu">
  <ion-content>
  <ion-header>
    <ion-toolbar>
      <ion-img src="assets/images/logo-menu.png"></ion-img>
    </ion-toolbar>
  </ion-header>
    <ion-list>
    <ion-menu-toggle *ngFor="let page of navigate" auto-hide="false">
      <ion-item [routerLink]="page.url" routerDirection="forward" [class.active-menu]="activePath === page.url">
          <ion-icon [name]="page.icon" slot="start" color="#EBF8FF"></ion-icon>
              {{page.title}} 
      </ion-item>
    </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>

Any ideas?