Adding menu to ionic 4 app

i created a ionic 4 app with tabs template and deleted the tabs later as i felt i need the side menu instead. now can i add it?

it tried to add it like below in app.component.html

<ion-app>

        <ion-menu>
          <ion-header>
            <ion-toolbar>
              <ion-title>Menu</ion-title>
            </ion-toolbar>
          </ion-header>
        </ion-menu>
        <ion-router-outlet></ion-router-outlet>

</ion-app>

my home.html looks like

<ion-header>
  <ion-toolbar>
    <ion-title><ion-row><ion-col text-center>main app title</ion-col></ion-row></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>

now how do i make side menu icon appear?

Hello,
at home I have that
app.component.html:

<ion-app>
    <ion-split-pane>
      <ion-menu>
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
              <ion-avatar>
                  <img src="../assets/img/avatar1.png">
                </ion-avatar>
            <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
              <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
                <ion-icon slot="start" [name]="p.icon"></ion-icon>
                <ion-label>
                  {{p.title}}
                </ion-label>
              </ion-item>
              <ion-button (click)='logout()' fill="clear">Sign out</ion-button>
            </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>
      <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
  </ion-app>

exemple in my user.page.html

<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
    <ion-title>User</ion-title>
  </ion-toolbar>
</ion-header>
1 Like

I also block on the css of the side-menu
if someone can tell me where to put my css?

thank you in advance