Using ion-side-menu with Ionic header - angularjs

Question

<ion-view>
<div ng-if="showHeader">
<ion-header-bar class="bar bar-header navbar-fixed-top">
<div class="row">
<div>
<span class="navbar-brand" href="#">
//data
</span>
</div>
<div class="button button-icon" ng-click="">
//button
</div>
</div>
</ion-header-bar>
</div>
<div id="customSubHeader">
//content
</div>
<ion-nav-view name="PageView"></ion-nav-view>
</ion-view>
I tried replacing it with
<div ng-if="showHeader">
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar bar-header navbar-fixed-top">
<div class="row">
<div>
//data
</div>
<div class="button button-icon topPull" ng-click="toggleTopMenu()">
//button
</div>
</div>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<h2 style="margin-top:80px;">Side Menu</h2 >
</ion-side-menu>
</ion-side-menus>
</div>
but no help.
How do I integrate an Ionic side menu in <ion-header-bar></ion-header-bar>? I don't think I can replace header bar with navbar now and having header bar in ion-side-menu does not display anything.

Answer 1

You have to create your menu state something like this
$stateProvider.state('menu', {
url: '/menu',
abstract: true,
templateUrl: 'templates/menu.html'
});
your menu.html file will have the header something like this
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content class="list-black">
<ion-list>
<ion-item class="background-black" menu-close href="#/menu/home">
Home
</ion-item>
........
.......
</ion-list>
</ion-content>
</ion-side-menu>
and then your template page will be something like this
<ion-header-bar class="header-black">
<button class="button button-icon button-clear" menu-toggle="left"><i class="icon-icon-hamburger icon-white"></i></button>
<h1 class="title light header-title">App header for home page</h1>
<div class="buttons" side="left">
<button class="button button-clear button-light" ng-click="toggleLayout()">
<i ng-show="layoutOptions.value == 'grid'" class="icon-icon-list icon-white icon-36"></i>
<i ng-show="layoutOptions.value == 'list'" class="ion-android-apps icon-white icon-30"></i>
</button>
<button class="button button-clear button-light"><i class="icon-icon-notification icon-white icon-30"></i></button> <span class="badge badge-assertive">13</span>
</div>
</ion-header-bar>
<ion-content ng-show="layoutOptions.value == 'grid'">
.....
....