Creating persistent ionic-menu across all the child pages

Hello,

I have a component

@Component({ 

selector: 'header-card',

templateUrl: 'header-card.html'

}) 

export class HeaderCardComponent {

text: string;

constructor(public menuCtrl: MenuController) {

console.log('Hello HeaderCardComponent Component');

this.text = 'Hello World';

this.menuCtrl.enable(true, 'main-menu')
}

toggleMenu() {
alert('hello')
this.menuCtrl.toggle();
console.log(this.menuCtrl.getMenus())
}
}

which I use to put on top of each page. This is sort of header. It contains a button for toggle menu.

On child views the toggle button works, but the menu remains under the child view and never show on top view. I want the menu to show up.

See the video. The alert box come up because the toggleMunu function works from any page. But the menu show on first page but inside profile only alert box show but not the menu.