Combined tabbed and side menu project

ionic-v1
1

I have tried to merge the sample tabs and side menu project together. I am trying to achieve an inteface with both sliding side menu and tabs bar at the bottom.

The 2 sample projects are largely similar out-of-the-box.

Essentially, what I have done is copy and paste those state routing in app.js and controllers in controller.js both projects together. For simplicity, I put everything in index.html.

The major tweaks I did are:

In the routing, I had to merge both the tab and app abstract state leaving only app as the sole abstract state. I cannot use the default tab abstract state in the tabs project.

.state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

In the routing views for the tabs, I had to specify views as menuContent rather than the default templateUrl only. For example:

.state('app.dash', {
   url: '/dash',
   views: {
      'menuContent': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }
  }
})

The menu.html template was also added with the tabs.

<ion-tab title=“Status” icon-off=“ion-ios-pulse” icon-on=“ion-ios-pulse-strong” href="#/app/dash>


However, the <ion-nav-view ...> inside each of the <ion-tab ...> were removed. As I realise there should be only 1 <ion-nav-view ...> used by side menu called menuContent.

I am able to navigate between the different pages using both the side menu and tabs. However, there is an outstanding problem. When I navigate using the tabs, the top left navigation menu button to open the side menu disappear. If I were to navigate the same page using the side menu, the menu button would appear as intended.

I have also tried to force the menu button using <ion-nav-buttons ...> for the tab pages. Still, the button does not appear if navigated using the tab bar.

<ion-view view-title="Dashboard">
  
  <ion-nav-bar class="bar-royal">
    <ion-nav-buttons side="left">
      <!-- Toggle left side menu -->
      <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
  </ion-nav-bar>

  <ion-content class="padding"> ...

May I know what may be wrong? Have I missed out something? What can I do or take note of to control the visibility of the top left menu button to open the side menu?