Show side menu in Ionic

0
votes

I tried many solutions to display side menu button but none appears to work. Let me know what I am missing. I want to have left side menu burger icon on my left side along with the tabs as well.

If anything else you need from my side, let me know please.

app.js

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

  .state('tab.activity', {
    url: '/tab-activity',
    views: {
      'tab-activity': {
        templateUrl: 'templates/tab-activity.html',
        controller: 'tabActivityCtrl'
      }
    }
  })

  .state('tab.profile', {
    url: '/tab-profile',
    views: {
      'tab-profile': {
        templateUrl: 'templates/tab-profile.html',
        controller: 'tabProfileCtrl'
      }
    }
  })

Following is my content in tabs.html file -

<ion-side-menus>
  <ion-side-menu-content>
    <ion-nav-bar class="bar-energized nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="snd" animation="slide-left-right"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar bar-header bar-assertive">
      <h1 class="title">Second Section Left Menu</h1>
    </ion-header-bar>
    <ion-content has-header="true">
      <ul class="list">
        <a ui-sref="snd.home" nav-clear class="item">Home</a>
        <a ui-sref="snd.chat" nav-clear class="item">Chat</a>
        <a ui-sref="snd.drink" nav-clear class="item">Drink</a>
      </ul>
    </ion-content>
    <ion-footer-bar class="bar bar-footer">
      <a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>
    </ion-footer-bar>
  </ion-side-menu>
</ion-side-menus>

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <!-- Activity Tab -->
  <ion-tab title="Activity" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab-activity">
    <ion-nav-view name="tab-activity"></ion-nav-view>
  </ion-tab>

  <!-- Profile Tab -->
  <ion-tab title="Profile" icon-off="ion-ios-people" icon-on="ion-ios-people" href="#/tab/tab-profile">
    <ion-nav-view name="tab-profile"></ion-nav-view>
  </ion-tab>
</ion-tabs>
2
javascripthtmlcssangularjsionic-framework
ionicframework.com/docs/api/directive/ionSideMenus - code

2 Answers

3
votes

Create a specific controller (in the example below is 'NavCtrl') and attach to <ion-side-menu> with ngController directive. In that controller you add the $ionicSideMenuDelegate.toggleLeft(); method.

Here is a working snippet:

angular.module('ionicApp', ['ionic'])

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

    $stateProvider
      .state('tab', {
        url: '/tab',
        abstract: true,
        templateUrl: 'templates/tabs.html'
      })
    .state('tab.activity', {
      url: '/tab-activity',
      views: {
        'tab-activity': {
          templateUrl: 'templates/tab-activity.html',
          controller: 'tabActivityCtrl'
        }
      }
    })
    .state('tab.profile', {
      url: '/tab-profile',
      views: {
        'tab-profile': {
          templateUrl: 'templates/tab-profile.html',
          controller: 'tabProfileCtrl'
        }
      }
    });

    $urlRouterProvider.otherwise("/tab/tab-activity");

  })
  .controller('NavCtrl', function($scope, $ionicSideMenuDelegate) {
    $scope.showMenu = function() {
      $ionicSideMenuDelegate.toggleLeft();
    };
  })
 .controller('tabActivityCtrl', function($scope) {})
.controller('tabProfileCtrl', function($scope) {});
<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Tabs Example</title>

  <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>

<body>

  <ion-side-menus>

    <ion-side-menu-content ng-controller="NavCtrl">
      <ion-nav-bar class="bar-energized nav-title-slide-ios7">
        <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>

        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
          </button>
        </ion-nav-buttons>

      <ion-nav-view animation="slide-left-right"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left">
      <ion-header-bar class="bar bar-header bar-assertive">
        <h1 class="title">Second Section Left Menu</h1>
      </ion-header-bar>
      <ion-content has-header="true">
        <ul class="list">
          <li>
            <a class="item" menu-close nav-clear href="#/tab/home">Home</a>
          </li>
          <li>
            <a class="item" menu-close href="#/tab/chat">Chat</a>
          </li>
          <li>
            <a class="item" menu-close href="#/tab/drink">Drink</a>
          </li>
        </ul>
      </ion-content>
    <ion-footer-bar class="bar bar-footer">
      <a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>
    </ion-footer-bar>
    </ion-side-menu>
  </ion-side-menus>


  <script id="templates/tabs.html" type="text/ng-template">


    <ion-tabs class="tabs-icon-top tabs-color-active-positive">
      <!-- Activity Tab -->
      <ion-tab title="Activity" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab-activity">
        <ion-nav-view name="tab-activity"></ion-nav-view>
      </ion-tab>

      <!-- Profile Tab -->
      <ion-tab title="Profile" icon-off="ion-ios-people" icon-on="ion-ios-people" href="#/tab/tab-profile">
        <ion-nav-view name="tab-profile"></ion-nav-view>
      </ion-tab>
    </ion-tabs>
  </script>

  <script id="templates/tab-activity.html" type="text/ng-template">
    <ion-view title="tab-activity">
      <ion-content>
        <h3>tab-activity</h3>
        <p>Example of Ionic tabs. Navigate to each tab, and navigate to child views of each tab and notice how each tab has its own navigation history.</p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/tab-profile.html" type="text/ng-template">
    <ion-view title="tab-profile">
      <ion-content>
        <h3>tab-profile</h3>
        <p>bla bla bla </p>
      </ion-content>
    </ion-view>
  </script>
</body>

</html>
0
votes

Have you added the Delegate function? :

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}