why is my menu hidden by the content of my page? Ionic 5

user_14880993 0
Viewed 457

It's my first time using ionic 5. So i try to add an side menu in my app. But when i add it, it was hide by my page content. Everywhere i call it. Did you meet the same problem ?

my 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>

in my home.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>

Thank you!

ionic5 ionic-framework angular javascript
1 Answers

The reason it gets overlapped by your page content is that you have <ion-tabs> placed outside of <ion-app> .

App is a container element for an Ionic application. There should only be one element per project. The overlay components get appended to the <ion-app> when they are presented.

So, place your ion-tabs inside ion-app. But a more optimized approach would be to place your <ion-tabs> in a separate page like home.component.html because ion-tabs are also container of other pages (tabs). From there you can create your logic of opening the tabs.

This simple tutorial would help: https://www.freakyjolly.com/ionic-tabs-bar-navigation-tutorial/#.X-Q0P9gzbIU

user_106026790
Related