Почему мое меню скрыто за содержимым моей страницы? Ионный 5

Я впервые использую ionic 5. Поэтому я пытаюсь добавить боковое меню в свое приложение. Но когда я добавил его, он был скрыт содержимым моей страницы. Везде я его называю. Вы столкнулись с той же проблемой?

мой app.component.html

    <ion-app>
      <ion-menu contentId = "menu-content" menuId = "menu-content" side = "end">
        <ion-header>
          <ion-toolbar>
            <ion-title>Awesome avocado menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          Awesome avocado content
        </ion-content>
      </ion-menu>
      <ion-router-outlet id = "menu-content"></ion-router-outlet>
    </ion-app>
    
    <ion-tabs>
      <ion-tab-bar slot = "bottom">
        <ion-tab-button routerLinkActive = "tab-selected" routerLink = "/home" class = "ios" tab = "home">
          <ion-icon name = "list-box"></ion-icon>
          <ion-label>Appointments</ion-label>
        </ion-tab-button>
    
        <ion-tab-button routerLinkActive = "tab-selected" routerLink = "/make-appointment" class = "ios" tab = "make-appointment">
          <ion-icon name = "add-circle"></ion-icon>
          <ion-label>Book Appointment</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>

в моем доме.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot = "start">
      <ion-menu-button  auto-hide = "true" ></ion-menu-button>
    </ion-buttons>
 <ion-title>app-menu</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  Lorem Ipsum is simply dummy text of the
   printing and typesetting industry. Lorem Ipsum has been the 
  industry's standard dummy
</ion-content>

Спасибо!