Side-menu auto open loading time issue in ionic - router

Question

I use ion-menu component in my app. I change it based route. so I modified that. For ex is below.
My issue is first time menu clicked & the app load next that menu
related view time the side menu was close correctly but reopened next few second.
My approutemodule.ts
[{
path: '',
canActivate: [AuthGuard],
component: SideMenuComponent,
children: [{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
}, {
path: 'dashboard',
loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule'
}, {
path: 'tabs-view',
loadChildren: './layouts/footer-tabs/footer-tabs.module#FooterTabsPageModule'
}]
}, {
path: 'login',
loadChildren: './pages/login/login.module#LoginPageModule'
}];
My appcomponent.html
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
My sidemenucomponent.html
<ion-split-pane>
<ion-menu id="app-side-manu" #sideMenu>
<ion-header class="user-img">
<ion-toolbar>
<ion-avatar>
<img *ngIf="userImg" [src]="userImg" alt="user-img" />
</ion-avatar>
<div>
<h2>{{userName}}</h2>
<p>{{userLoc}}</p>
</div>
</ion-toolbar>
</ion-header>
<ion-content class="side-menu">
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
<ion-item lines="none" class="link-hover" routerDirection="root" [routerLink]="p.url">
<ion-thumbnail slot="start">
<ion-img [src]="p.icon"></ion-img>
</ion-thumbnail>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false" >
<ion-item lines="none" class="link-hover" (click)="globalHelper.logout()">
<ion-thumbnail slot="start">
<ion-img src="/assets/images/logout.png"></ion-img>
</ion-thumbnail>
<ion-label>Logout</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>

Answer 1

Use side-menu component selector in your app component html file.
For Ex:
<ion-app>
<app-sidemenu-component></app-sidemenu-component>
</ion-app>
If you want side-menu show hide different screen. It's possible.
For Ex:
home screen is need to side-menu
// first import MenuController in your home screen
import { MenuController } from '#ionic/angular';
// Next add that constructor to assign private variable menuCtrl
constructor(private menuCtrl: MenuController){}
// then use it ionViewWillEnter method inside
ionViewWillEnter() {
this.menuCtrl.enable(true);
}
login screen is no need to side-menu
ionViewWillEnter() {
this.menuCtrl.enable(false);
}