When I add ion-menu, my page is freezing

Hi Ionic community,

When I add ion-menu with on-router-outlet, my principal page is freezing in ios device ios 14. I can’t scroll and I can’t click on item.

Thank you for your help

<ion-header  *ngIf="!showModal && !showModalCreateGroupe && !showModalCreateContact && !showInfoGroup">
    <ion-toolbar color="default">
        <ion-buttons  slot="start">
            <ion-menu-button color="light" autoHide="false"(click)="triggerSlideMenu()"></ion-menu-button>
        </ion-buttons>

        <ion-buttons *ngIf="!displaySearchBar" slot="start">
            <ion-button (click)="home()"> 
                <ion-icon slot="icon-only" src="assets/home.svg"></ion-icon>
            </ion-button>
        </ion-buttons>

        <ion-title *ngIf="(!inContactName || inContactName == '')  && (!inGroupName || inGroupName == '') && !displaySearchBar" >Focus</ion-title> 
        <ion-title *ngIf="inContactName && inContactName != '' && !displaySearchBar"> {{ inContactName }}</ion-title>
        <ion-title *ngIf="inGroupName && inGroupName != '' && !displaySearchBar">{{inGroupName}}</ion-title>

        <ion-searchbar *ngIf="displaySearchBar"  mode="ios" placeholder="  Rechercher..." [(ngModel)]="word" (ionChange)="searchPost()"></ion-searchbar>

        <ion-buttons *ngIf="displaySearchBar" color="light" size="small" slot="end" (click)="cancelSearchPoste()">Annuler</ion-buttons>


            
        <ion-buttons *ngIf="!displaySearchBar"  slot="end" (click)="searchPost()">
            <ion-button>
                <ion-icon color="light" slot="icon-only" name="search"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>  
   
</ion-header>
<ion-content>
    <app-post *ngFor="let post of posts; let i = index" [indexOfPost]="i" [EmmetName]="post.emmetName"
    [EmmetPhone]="post.emmetPhone" [Text]="post.texte" [id]="post.idPostEmet"
    [destinataires]="post.destinataires" [groups]="post.groups" [dateCreation]="post.dateCreation"
    [cmtnonlu]="post.cmtnonlu" [visited]="post.visited"
    [post]="post" [contacts]="contacts" (showInfoGroupEvent)="clickInfoGroupe($event)" ></app-post>
    
</ion-content>

<div class="newMessageContainer" *ngIf="!showModal && !showModalCreateGroupe && !showModalCreateContact && !showInfoGroup">
    <button class="newMessageMobile clickable" (click)="newMessage()">
        <ion-icon slot="start" color="light" size="large" name="create-outline"></ion-icon>
    </button>
</div>
 
 
<div *ngIf="showModal" class="custom_envoi_message_modal">
    <app-envoi-message [contacts]=contacts [groupsName]=groupsName [userSession]=userSession (closeWithoutSending)="closeWithoutSending()">
    </app-envoi-message>
</div>


<div *ngIf="showModalCreateContact" class="custom_envoi_message_modal"  swipeToClose={true}>
<ion-header> 
    <ion-toolbar  color="default"> 
        <ion-buttons slot="start" (click)="closeCreateContact()">
            <ion-back-button  color="light" defaultHref="home" ></ion-back-button>
        </ion-buttons>
        <ion-title slot='start'>Nouveau contact </ion-title>
    </ion-toolbar>        
</ion-header>
<ion-content>
    <ion-list-header lines="full">
        <ion-label>
          Ajouter un contact
        </ion-label>
      </ion-list-header>
    <ion-list lines="full" class="ion-no-margin">
        <ion-item>
            <ion-input type="text" placeholder="Nom" [(ngModel)]="contactName"></ion-input>
            <h2 *ngIf="!emptyName">/!\ Entrer un nom</h2>
        </ion-item>
        <ion-item>
            <ion-input  type="text" placeholder="Téléphone" [(ngModel)]="contactPhone"></ion-input>
            <h2 *ngIf="!emptyPhone">/!\ Entrer un numéro de téléphone</h2>
        </ion-item>
    </ion-list>  

    <ion-button color="blue" expand="full" (keyup.enter)="ModalCreateContact()" (click)="ModalCreateContact()" fill="outline">Créer contact</ion-button>
    
</ion-content> 

  
</div>     
<div *ngIf="showModalCreateGroupe" class="custom_envoi_message_modal"  swipeToClose={true}>
  <ion-app>
    <ion-header> 
        <ion-toolbar  color="default"> 
            <ion-buttons slot="start" (click)="closeCreateGroupe()">
                <ion-back-button  color="light" defaultHref="home" ></ion-back-button>
            </ion-buttons>
            <ion-title slot='start'>Nouveau groupe </ion-title>
        </ion-toolbar>        
    </ion-header>
    <ion-content slot="fixed" scrollY=false fullscreen>
     
           
       
            <ion-list-header lines="full">
                <ion-label>
                Créer un nouveau groupe
                </ion-label>
            
            </ion-list-header>
            <ion-item>
                <ion-input type="text" placeholder="Nommer le groupe" [(ngModel)]="groupeName"></ion-input>
                <h2 *ngIf="!emptyGroupeName">/!\ Entrer un nom</h2>
            </ion-item>
      
     

    
        <ion-list class="listOfContactsNewGroupe blackNormalFont">
            <app-contact  (contactEventEmitter)="onCheckContact($event)"           
                *ngFor="let contact of contacts; let i = index"
                [indexOfContact]="i"
                [contactName] ="contact.name"
                [contact]="contact"
                [isMenu] ="false">
            </app-contact>
        </ion-list> 
    </ion-content> 
  
    <ion-footer>
        <ion-toolbar>
            <ion-button color="blue" expand="full"  (click)="ModalCreateGroupe()" fill="outline">Créer groupe</ion-button>

        </ion-toolbar>
    </ion-footer>


</ion-app>  
  
</div> 

<!--*ngIf="menuTrigger"-->
    <ion-menu menuId="main-menu" content-id="main" *ngIf="menuTrigger">
        <ion-header>
        <ion-toolbar>
            <ion-buttons class="yuyuGreen" slot="start">
                <ion-menu-button color="light" autoHide="false"></ion-menu-button>
            </ion-buttons>
            <ion-buttons class="yuyuGreen" slot="start">
                <ion-button (click)="home()"> 
                    <ion-icon slot="icon-only" src="assets/home.svg"></ion-icon>
                </ion-button>
            </ion-buttons>
            <ion-title class="yuyuGreen">Focus</ion-title>
        </ion-toolbar>
        </ion-header>
        <ion-content class="ParentSideBar" scrollY=false fullscreen>
    

        <div class="contactsLabelMobile">
            <ion-buttons  *ngIf="!displaySearchBarGroupe"  slot="start" (click)="searchGroupe()">
                    <ion-button>
                        <ion-icon color="dark" slot="icon-only" name="search"></ion-icon>
                    </ion-button>
            </ion-buttons> 
        
            <ion-list-header *ngIf="!displaySearchBarGroupe">Groupes </ion-list-header>
            <ion-icon *ngIf="!displaySearchBarGroupe" name="add" (click)="ModalCreateGroupe()" size="large"></ion-icon> <!-- -->
        
            <ion-searchbar *ngIf="displaySearchBarGroupe" placeholder="Groupes" [(ngModel)]="wordGroupe" (ionChange)="searchGroupe()"></ion-searchbar>
            <ion-buttons *ngIf="displaySearchBarGroupe"  size="small" slot="end" (click)="cancelSearchGroupe()">Annuler</ion-buttons>
        
        </div>

        <div class="noGroupe" *ngIf="groups.length == 0">
            <ion-label class="labelInformation">Vous n'avez aucun groupe</ion-label>
            <ion-button color="light" (click)="ModalCreateGroupe()">Créer</ion-button>
        </div>
       
        
        <ion-list class="listOfGroupesMenu blackNormalFont"  *ngIf="groups.length != 0">
           
            <app-groupe (groupEventEmitter)="selectGroup($event)"  *ngFor="let group of groups; let i = index"
            [indexOfGroup]="i" [groupName]="group.nameGroupe" [group]="group" [isMenu]="true">
            </app-groupe>
        </ion-list> 


        <div class="contactsLabelMobile">
        

            <ion-buttons *ngIf="!displaySearchBarContact"  slot="start" (click)="searchContact()">
                <ion-button>
                    <ion-icon color="dark"  slot="icon-only" name="search"></ion-icon>
                </ion-button>
            </ion-buttons> 
    

            <ion-list-header *ngIf="!displaySearchBarContact"> Contacts </ion-list-header> 
            
                <ion-icon *ngIf="!displaySearchBarContact" name="add" (click)="ModalCreateContact()" size="large"></ion-icon> 
        

        
            <ion-searchbar *ngIf="displaySearchBarContact" placeholder="Contacts" [(ngModel)]="wordContact" (ionChange)="searchContact()"></ion-searchbar> 
            <ion-buttons *ngIf="displaySearchBarContact"  size="small" slot="end" (click)="cancelSearchContact()">Annuler</ion-buttons>
        
        </div>
            <ion-list class="listOfContactsMenu blackNormalFont">
                <app-contact (contactEventEmitter)="selectContact($event)"  *ngFor="let contact of emetteurRecent; let i = index"
                [indexOfContact]="i" [contactName]="contact.name" [contact]="contact" [isMenu]="true">
                </app-contact>
            </ion-list>

            <div class="noContact" *ngIf="contacts.length == 1">
                <ion-label class="labelInformation">Vous n'avez aucun contact</ion-label>
                <ion-button color="light" (click)="ModalCreateContact()">Ajouter</ion-button>
            </div>
        </ion-content>
    </ion-menu>
    <ion-router-outlet id="main"></ion-router-outlet>



   
<div *ngIf="showInfoGroup" class="custom_envoi_message_modal"swipeToClose={true}>
    <app-info-group *ngIf="clickedGroupe != undefined" (closeInfoGroupe)="closeInfoGroupe()" [groupe] = clickedGroupe [participants] = clickedGroupe.participants [contacts] = "contacts">
    </app-info-group>
</div>

1 post - 1 participant

Read full topic