Split pane and ion menu button

Firstful i generate a dynamic menu for split pane, when i resize my page, the ion menu button displayed, for now is good, but when i click the menu button, the menu show duplicated items, so how i can handle this problem please help me !!
error1 error2

Can you post the relevant code?

Menu

<ion-split-pane contentId="menu-content">
  <!--  our side menu  -->
  <ion-menu side="start" contentId="menu-content" menuId="first">
    <ion-header>
      <ion-toolbar translucent>
        <ion-title>I-Check</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div *ngFor="let p of pages">
        <ion-menu-toggle menu="first" *ngIf="p.url">
          <!-- <ion-menu-button color="light"></ion-menu-button> -->
          <ion-item [routerLink]="p.url" routerDirection="root" routerLinkActive="active">
            <ion-label>{{ p.title }}</ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-item button *ngIf="p.url; else childrenItem" [routerLink]="[{ outlets: { admin: [p.url] } }]"
          [class.active-parent]="p.open" detail="false">
          <ion-icon [src]="p.icon" slot="start"></ion-icon>
          <ion-icon slot="end" name="arrow-dropright" *ngIf="p.children?.length > 0 && !p.open"></ion-icon>
          <ion-icon slot="end" name="arrow-dropdown" *ngIf="p.children?.length > 0 && p.open"></ion-icon>
          <ion-label>{{ p.title }}</ion-label>
        </ion-item>

        <ion-list *ngIf="p.open" lines="none">
          <!-- <ion-menu-toggle> [routerLink]="['/admin',{ outlets: { admin: [sub.url] } }]"  -->
          <ion-item button class="sub-item" *ngFor="let sub of p.children" (click)="navigateTo(sub.url)"
            routerDirection="root" routerLinkActive="active">
            <ion-label>{{ sub.title }}</ion-label>
          </ion-item>
          <!-- </ion-menu-toggle> -->
        </ion-list>

        <ng-template #childrenItem>
          <ion-item button (click)="p.open = !p.open" [class.active-parent]="p.open" detail="false">
            <ion-icon [src]="p.icon" slot="start"></ion-icon>
            <ion-icon slot="end" name="arrow-dropright" *ngIf="p.children?.length > 0 && !p.open"></ion-icon>
            <ion-icon slot="end" name="arrow-dropdown" *ngIf="p.open"></ion-icon>
            <ion-label>{{ p.title }}</ion-label>
          </ion-item>
        </ng-template>

      </div>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="menu-content" name="admin"></ion-router-outlet>
</ion-split-pane>

Example Page with ion-menu-button

<ion-header>
  <ion-toolbar>
    <ion-title>Conducteur</ion-title>
    <ion-buttons slot="start" menuId="first">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
</ion-content>