Ionic - both sidemenu and tabs

Question

I need to implement both a sidemenu and tabs on the same screen in my Ionic app project.

It is working (almost). I want my bottom tabs to be visible always, but I also want to be able to navigate to other (then tab) view from the sidemenu. It should keep all tabs menu visible but with all items inactive.

My states definition:

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
  $stateProvider

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

  .state('app.locations', { // this view doesn't work, when I navigate to it, it changes view title only.
    url: '/locations',
    views: {
      'menuContent': {
        templateUrl: 'templates/views/locations.html',
        controller: 'LocationsCtrl'
      }
    }
  })

  .state('app.home', {
    url: '/home',
    views: {
      'tab-home': {
        templateUrl: 'templates/tabs/home.html',
        controller: 'HomeCtrl'
      }
    }
  })

  .state('app.history', {
      url: '/history',
      views: {
        'tab-history': {
          templateUrl: 'templates/tabs/history.html',
          controller: 'HistoryCtrl'
        }
      }
    })

  .state('app.messages', {
    url: '/messages',
    views: {
      'tab-messages': {
        templateUrl: 'templates/tabs/messages.html',
        controller: 'MessagesCtrl'
      }
    }
  });

  $urlRouterProvider.otherwise('/app/home');

});

My base.html template:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>

    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view> <!-- IS IT OK?? -->

    <ion-tabs class="tabs-icon-top tabs-color-active-positive">

      <ion-tab title="Home" icon-off="ion-ios-home" icon-on="ion-ios-home" ui-sref="app.home">
        <ion-nav-view name="tab-home"></ion-nav-view>
      </ion-tab>

      <ion-tab title="History" icon-off="ion-ios-clock-outline" icon-on="ion-ios-clock-outline" ui-sref="app.history">
        <ion-nav-view name="tab-history"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Messages" icon-off="ion-ios-email-outline" icon-on="ion-ios-email-outline" ui-sref="app.messages" badge="2" badge-style="badge-assertive">
        <ion-nav-view name="tab-messages"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item class="item item-divider">Location: B17726</ion-item>
        <ion-item menu-close href="#/app/locations">
          Login
        </ion-item>
        <ion-item menu-close>
          Search
        </ion-item>
        <ion-item menu-close>
          Browse
        </ion-item>
        <ion-item menu-close>
          Playlists
        </ion-item>
        <ion-item class="item item-divider">
          General
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Basically, I want to have bottom tabs always visible, event no of its items is active. When one of tabs is clicked, I want to show it as normal.

Answer 1

Would comment if I could (no rep woes) but here's the track I'm currently looking down if this helps you at all or gives you a flash of inspiration. I'm trying to figure this out as well.

Here's a similar question on the Ionic Forums: http://forum.ionicframework.com/t/show-tab-bar-on-pages-not-children-of-the-tab-bar/726

The last comment mentions an Angular method called $ionicTabsDelegate with a method called showBar(show) which takes a boolean on whether or not to show the tabs bar.

Ref: http://ionicframework.com/docs/api/service/%24ionicTabsDelegate/

Here's the code I've currently produced, though it doesn't seem to work (hopefully it's close)?

index.html

<ion-content class="side-menu-left" ng-controller="AppCtrl">
  <ion-list <!--Irrelevant Stuff Here-->>
    <ion-item ui-sref="aboutUs" <!--Irrelevant Stuff Here--> ng-click="showTabs()" menu-close>
      <i class="icon ion-information-circled"></i>About Us</ion-item>

  <!-- More Menu Items Here etc. -->

controllers.js

.controller('AppCtrl', function($scope, $ionicTabsDelegate) {

    $scope.showTabs = function() {
        $ionicTabsDelegate.showBar(true);
    };
});

Edit: Here is another Ionic forum post on this subject along with what seems to be a working Codepen example.

• forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311
• codepen.io/gnomeontherun/pen/tbvdH