How do I create a sidemenu with tabs?


#1

I’m creating an app with Ionic, first I created the tabs and it works fine, but now I want to create a side-menu with does tabs but I don’t know how could I do this.

How could I do this ?

index.html

<body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">

         <!-- The nav bar that will be updated as we navigate -->
          <ion-nav-bar class="bar bar-header bar-assertive" align-title="center"> 
          </ion-nav-bar>

          <!-- where the initial view template will be rendered -->
          <ion-nav-view>
            <ion-view>            
              <ion-content></ion-content>
            </ion-view>
          </ion-nav-view>

tabs.html

<ion-view view-title="MeuPedido" align-title="center">

<ion-tabs class="tabs-icon-top tabs-top tabs-assertive"> 
  <ion-tab icon="icon ion-fork" title="Compras">
    <ion-nav-view name="tab-empresas"></ion-nav-view>
    <ion-nav-view name="tab-produtos"></ion-nav-view>
    <ion-nav-view name="tab-qtdProduto"></ion-nav-view>
  </ion-tab>              

  <ion-tab icon="ion-ios-cart"                title="Carrinho"></ion-tab>  
  <ion-tab icon="ion-android-person"          title="Perfil"></ion-tab>
  <ion-tab icon="ion-information-circled"     title="Sobre"></ion-tab>
</ion-tabs> 

app.js

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

  // setup an abstract state for the tabs directive
  .state('main', {    
      url: "/main",
      templateUrl: 'templates/main.html',  
      controller: 'MainCtrl'
  })

  .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'UserCtrl'    
  })

  .state('addUsuario', {
    url: '/addUsuario',
    templateUrl: 'templates/addUsuario.html',
    controller: 'UserCtrl'    
  })

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

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

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/main');
})

#2

Solved, is very simple.

I did

index.html

<body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">

             <!-- The nav bar that will be updated as we navigate -->
              <ion-nav-bar class="bar bar-header bar-assertive" align-title="center"> 
              </ion-nav-bar>

              <!-- where the initial view template will be rendered -->
              <ion-nav-view></ion-nav-view>
    
  </body>

sidemenu.html

<ion-side-menus>
  <!-- Center content -->
  <ion-side-menu-content>
	<ion-nav-bar class="bar bar-header bar-assertive" >
      <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>
  </ion-side-menu-content>

  <!-- Left menu -->
  <ion-side-menu side="left">
	<ion-header-bar class="bar-stable">
      <h1 class="title">Header</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>        
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>

	<ion-footer-bar class="bar bar-footer">
        <h6>Desenvolvido por Iguana Sistemas</h6>
  	</ion-footer-bar>

  </ion-side-menu>

 
</ion-side-menus>

tabs.html

<ion-view view-title="MeuPedido" align-title="center">



	<div class="tabs tabs-top tabs-light">
        <a nav-clear class="tab-item disable-user-behavior active" title="Home" nav-clear ui-sref="snd.home">
          <i class="icon ion-home"></i><span class="tab-title ng-binding" ng-bind-html="title"></span>
        </a>
        <a nav-clear class="tab-item disable-user-behavior" title="Chat" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ui-sref="snd.chat">
          <i class="icon ion-chatbubbles"></i><span class="tab-title ng-binding" ng-bind-html="title"></span>
        </a>
        <a nav-clear class="tab-item disable-user-behavior" title="Drink" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ui-sref="snd.drink">
          <i class="icon ion-wineglass"></i><span class="tab-title ng-binding" ng-bind-html="title"></span>
        </a>
    </div>
	
	
</ion-view>

app.js

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

  .state('app.tabs',{
    url: '/tabs',
      views: {
        'menuContent': {
          templateUrl: 'templates/tabs.html',                 
        }
      }
  })