Ionic 2: Menu Toogle not working

I have 2 pages, login and home, when the user successfully logins, it will be directed to the home page and I set this as the root page. I've confirmed this by using navCtrl.canGoBackFunction and it is false. I tried adding a Menu Toggle but when I pressed the toggle button the menu does not show up

This is my home.html

<ion-header>
    <ion-navbar color="primary">
        <button menuToogle ion-button icon-only class="menu-button-left">
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title class="alogo"><img alt="logo" height="35" src="../../assets/imgs/logo.png" ></ion-title>
        <button ion-button class="menu-button-right" (click)="logout()">
            <p>Logout</p>
        </button>
    </ion-navbar>
  </ion-header>
  <ion-content padding-left padding-right>

  </ion-content>

my home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { AuthService } from '../../app/services/auth.service'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public navCtrl: NavController,
    private authService: AuthService
  ) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
    console.log(localStorage.getItem('token'));
  }

  logout(){
    console.log('logout button clicked');
    this.authService.logOut();
    this.navCtrl.setRoot(LoginPage);
    this.navCtrl.popToRoot();
  }

}

my app.html

<ion-menu [content]="mycontent">
        <ion-content>
          <ion-list>
            <p>List/p>
          </ion-list>
        </ion-content>
</ion-menu>

<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>

I've re-read multiple times the manual and I didn't see any issues with the way I did, the manual says it I put it in navbar the page should be root. I also tried using a toolbar but again clicking the menu toggle button does not do anything. Any idea ?

Persistent menus display the MenuToggle button in the Navbar on all pages in the navigation stack. To make a menu persistent set persistent to true on the element. Note that this will only affect the MenuToggle button in the Navbar attached to the Menu with persistent set to true, any other MenuToggle buttons will not be affected. In your code you have to change like below code.

my app.html

<ion-menu [content]="mycontent" persistent="true">
        <ion-content>
          <ion-list>
            <p>List/p>
          </ion-list>
        </ion-content>
</ion-menu>

<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>