Ionic 4 Split-pane sidemenu disappears after navigation click

I want to outsource my navigation in a layout component.
I have done all that so far. For testing I created two pages, Home and Contact.
When I load the application, everything is displayed correctly. If I now click on the navigation point Contact, the page changes as expected. If I click on the Home menu item again, the page changes, but the navigation on the left side disappears forever.

I hope you can help me

Here the structure of the different files. I also attach a picture of the folder structure



import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import {MainLayoutWithSideNavComponent} from './layout/main-layout-with-side-nav/main-layout-with-side-nav.component';

const routes: Routes = [
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
    canActivate: [],
    path: 'home',
    component: MainLayoutWithSideNavComponent,
    canActivate: [],
    loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
    path: 'contact',
    component: MainLayoutWithSideNavComponent,
    canActivate: [],
    loadChildren: () => import('./pages/contact/contact.module').then(m => m.ContactPageModule)

  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  exports: [RouterModule]
export class AppRoutingModule {}


<ion-split-pane contentId="main-content">

  <ion-menu content-id="main-content">
      <ion-toolbar color="primary">

        <ion-menu-toggle auto-hide="false">

          <ion-item *ngFor="let nav of navi" button [routerLink]="'/'+">
            <ion-icon slot="start"></ion-icon>


  <div class="ion-page" id="main-content">
        <ion-buttons slot="start">
              <ion-icon slot="icon-only" name="menu"></ion-icon>
        <!--        <ion-title>Header</ion-title>-->
    <ion-content class="ion-padding">



  <ion-router-outlet animated="false"></ion-router-outlet>