I am using ionic4/angular4. I have created a side drawer menu .so all the menu HTML is in app.component.html and I accessing it in only one page but don’t know why the menu is showing in every page when device width is greater than 990px
app.component.html
<ion-app>
<ion-split-pane>
<ion-menu side="end" size=small>
<ion-header>
<ion-toolbar color=primary>
<ion-title style="font-size:15px;font-family: DINPro-Bold;color:#FFBF00">
Menu
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list style="font-size:5px">
<ion-menu-toggle auto-hide="false">
<ion-item lines="none" routerLink="/profileedit">
<ion-img src="../../assets/main_profile/edit.svg" slot="start"></ion-img>
<ion-label style="font-family: DINPro-Bold;font-size:12px">Edit Account</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item lines="none" routerLink="/profile">
<ion-img src="../../assets/main_profile/tnc.svg" slot="start"></ion-img>
<ion-label style="font-family: DINPro-Bold;font-size:12px">T&C</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item lines="none" routerLink="/privacy">
<ion-img src="../../assets/main_profile/policy.svg" slot="start"></ion-img>
<ion-label style="font-family: DINPro-Bold;font-size:12px">Privacy Policy</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
menu.page.html
<ion-menu-button class="ion-float-right"></ion-menu-button>
output is like until for IPAD device after that the device width is greater than iPad the output like this