How to change split-pane main page depending on size?

I have a phone size app, where the home page is a menu leading to other pages.

I want to obtain the same behaviour on phone, AND on tablet size this menu on the split pane, and a default page in the main pane.

When I try the split-pane example on the documentation, the main page is ALWAYS the same, and the sidemenu also.
So how can I change this behaviour to switch between menus and main pages ?

Something like :


<ion-split-pane contentId="menu-content">
 <!--  our side menu  -->
<ion-router-outlet [id_menu]="menu"></ion-router-outlet>

 <!-- the main content -->
 <ion-router-outlet [id_main]="main"></ion-router-outlet>
</ion-split-pane>

and

if (ionSplitPaneVisible){
    this.menu = menuPage;
    this.main = mainPage;
} else {
    this.main = menuPage;
}