Ion-menu-button not displaying in toolbar

Question

I am trying to get the menu hamburger button to display in the toolbar and whilst the title does display the menu button doesn't display, any suggestions would be hugely appreciated.

code for the home page.html is

<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
  <ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
  Dashboard
</ion-title>
</ion-toolbar>
</ion-header>

code for the app.component.html is

<ion-app>
<ion-menu side="start" >
<ion-header>
<ion-toolbar>
  <ion-title>
    Menu
  </ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
  <ion-item lines="none" routerLink="/landing">
    <ion-icon name="home-outline" slot="start">
      <ion-label>Home</ion-label>
    </ion-icon>
  </ion-item>
  <ion-item>
    <ion-icon name="qr-code-outline" slot="start">
      <ion-label>QR Code</ion-label>
    </ion-icon>
  </ion-item>
  <ion-item>
    <ion-icon name="search-outline" slot="start">
      <ion-label>Find a Tennis Partner</ion-label>
    </ion-icon>
  </ion-item>
  <ion-item>
    <ion-icon name="log-in-outline" slot="start">
      <ion-label>Volunteer Login</ion-label>
    </ion-icon>
  </ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet></ion-router-outlet>
</ion-app>

not sure if any other pages are relevant but can pop them in here if so. There is a login page which takes you to this home page. thanks

Answer 1

Try this code

app.component.html

<ion-app>
  <ion-menu contentId="main-content">
    <ion-header mode="ios">
      <ion-toolbar color="primary">
        <ion-title>Company A</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list lines="none">
        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
          <ion-item lines="none" class="menuitem">
            <ion-icon slot="start" [name]="p?.icon"></ion-icon>
            <ion-label>{{p?.title}}</ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="main-content"></ion-router-outlet>
</ion-app>
enter code here

app.component.ts

public pages: any = [{
    title: 'Home',
    icon: 'home',
    url: '/dashboard'
  }, {
    title: 'Profile',
    icon: 'person-circle',
    url: '/profile'
  }, {
    title: 'Announcement',
    icon: 'megaphone-outline',
    url: '/announcement'
  }, {
    title: 'Logout',
    icon: 'log-out',
    url: ''
  }];

Dashboard.html

<ion-header>
  <ion-toolbar mode="ios" color="carnation">
    <ion-buttons slot="start">
      <ion-menu-button color="white" auto-hide="true"></ion-menu-button>
    </ion-buttons>
    <ion-title mode="ios" color="white">Dashboard</ion-title>
  </ion-toolbar>
</ion-header>