Tap on ion-navicon to show new page with ion-tabs

ionic-v1
1

Hi all,

I have 3 tabs (ion-tabs - Home | Notification | Products).

<ion-tabs class="tabbed-navigation tabs-icon-top">
  <ion-tab ui-sref="main.app.home" ng-click="onTabClick('main.app.home')">
    <ion-nav-view name="home" ></ion-nav-view>
  </ion-tab>
  <ion-tab ui-sref="main.app.notify" ng-click="onTabClick('main.app.notify')">
    <ion-nav-view name="notify" ></ion-nav-view>
  </ion-tab>
  <ion-tab ui-sref="main.app.products" ng-click="onTabClick('main.app.products')">
    <ion-nav-view name="products" ></ion-nav-view>
  </ion-tab>
</ion-tabs>

I have an hamburger icon (ion-navicon) where I click on this icon, it should show me a new screen showing (user’s picture | edit profile | logout). Note, I do not want to use a side menu for this as I am imitating instagram way.

My button code in ion-header-bar

<button class="button button-icon button-clear ion-navicon" ui-sref="main.app.navigator" ng-click="onTabClick('main.app.navigator')"></button>

onNavClick will call the $state.go(url)

Note: the header with the hamburger icon will show in all the screens.

Now, when I click on the hamburger icon, it will not bring me to this new screen showing (user’s picture | edit profile | logout) which I need to retain the 3 tabs.

The states as follows

.state('main.app.home', {
    url: '/home',
    views: {
        'home@main.app': {
            templateUrl: 'views/home/home.html',
        }
    }
}
.state('main.app.notify', {
    url: '/notify',
    views: {
        'notify@main.app': {
            templateUrl: 'views/notify/notify.html',
        }
    }
}
.state('main.app.products', {
    url: '/products',
    views: {
        'products@main.app': {
            templateUrl: 'views/products/products.html',
        }
    }
}
.state('main.app.navigator', {
    url: '/navigator',
    views: {
        'navigator@main.app': {
            templateUrl: 'views/navigator/navigator.html',
        }
    }
}

Any help? Thanks.