Ionic Menu Component wont open on menu-button click

Ionic Framework Ionic Angular
1

Hi, I have been trying to figure out how exactly to get the menu component working because currently the menu bar icon is showing up but whenever I try to click on it the menu does not appear. Also, there are no errors thrown so I’m not entirely sure where I messed up in the process of creating the menu component?

app.component.html:

<ion-app>
    <!--<ion-split-pane contentId="main">-->
      <ion-menu side="start" type="overlay" menuId="left" contentId="main" [swipeGesture]="false">
      <!--   <ion-header>
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>
       -->

      <ion-header>
      </ion-header>
      <ion-content>
      <div class="ion-text-center center-content relative" (click) = "profile()" >
        <ion-img id = "userPicture" alt = "" src = "assets/imgs/user-default.png"></ion-img>
        <div class = "profile-edit">
          <div class="ion-text-center">
            <ion-img alt = "" src = "assets/imgs/camera_green.png"></ion-img>
          </div>
        </div>
      </div>
      <div class = "menu-list" *ngFor="let p of pages">
          <ion-menu-toggle auto-hide="true" *ngIf="p.url">
              <ion-item [routerLink]="p.url" routerDirection="forward" routerLinkActive="active">
                <ion-icon [src] = "p.icon" slot="start"></ion-icon>
                <ion-label>{{p.title}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
      </div>
      <div class="ion-text-right logout" (click) = "logout()">
        Logout
      </div>
      </ion-content>
  </ion-menu>
    <!--</ion-split-pane>-->

    <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->

    <!--<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>-->
    <ion-router-outlet id=”main”></ion-router-outlet>
  <style>
    :root {
      --ion-safe-area-top: 20px;
      --ion-safe-area-bottom: 22px;
    }

  </style>

app.component.ts:

export class MyAppPage {
    @ViewChild(NavController) nav: NavController;
    rootPage: any;
    backButtonPressedOnceToExit: any;
    menu: any;
    document: any;
    pages: Array<{ title: string, url: any, icon: string }>;
    hideWaves: boolean;
    bgInterval: any;
    config: {
        scrollAssist: false,
        autoFocusAssist: false
    };
    private userToken: string;
    constructor(public storage: Storage,
                public platform: Platform,
                public splashScreen: SplashScreen,
                private toastCtrl: ToastController,
                private route: Router,
                // tslint:disable-next-line:no-shadowed-variable
                private ApiService: ApiService,
                public menuCtrl: MenuController,
                private keyboard: Keyboard,
                private backgroundMode: BackgroundMode,
                private fcm: FirebaseX,
                private badge: Badge
    ) {
        this.initializeApp();
        this.hideWaves = false;

        // used for an example of ngFor and navigation
        this.pages = [
            {title: 'Today\'s Meds', url: '/dashboard', icon: 'assets/imgs/menu-today-med.png'},
            {title: 'Medicines', url: '/medicines', icon: 'assets/imgs/menu-medicine.png'},
            {title: 'Healthcare Providers', url: '/care-team', icon: 'assets/imgs/menu-care-team.png'},
            {title: 'Invite Friends', url: '/friends', icon: 'assets/imgs/menu-friends.png'},
            {title: 'Communities', url: '/communities', icon: 'assets/imgs/menu-communities.png'},
            {title: 'Connect to healthcare systems', url: '/hcs', icon: 'assets/imgs/menu-hcs.png'},
            {title: 'Devices / Wearables', url: '/wearables', icon: 'assets/imgs/menu-wearables.png'},
            {title: 'Notifications', url: '/notifications', icon: 'assets/imgs/menu-notification.png'},
            {title: 'Settings', url: '/settings', icon: 'assets/imgs/menu-setting.png'},
            {title: 'Help & Support', url: '/faq', icon: 'assets/imgs/menu-help.png'}
        ];

        //this.ApiService.getToken().then((val) => {
            // if (val){
            //this.route.navigate(['/auth']);
            //}
        // })

    }

example menu header in page:

<ion-header color = "primary">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
    <ion-title>CLINAKOS</ion-title>
</ion-toolbar>
</ion-header>