Issues With Ionic Side Menus :: Menus doesn't display


#1

Am newbie in Ionic and have the following code but the “app” page doesn’t display the side menus not even the sidemenu icon::

app.js

angular.module("eliteApp", ["ionic"])
    .run(function($ionicPlatform) {
        //hide the accessory bar by default
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            //org.apache.cordoava.statusbar required
            StatusBar.styleDefault();
        }
    })
    .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider.state("home", {
            url: "/home",
            templateUrl: "app/home/home.html"
        }).state("app", {
            url: "/app",
            templateUrl: "app/layout/menu-layout.html"
        });
        //if none of the above states are matched use this as the fallback
        $urlRouterProvider.otherwise("/app");
});

home.html

<ion-nav-bar class="bar-balanced">
    <h1 class="title">Elite Schedule</h1>
</ion-nav-bar>

<ion-tabs class="tabs-energized tabs-icon-top">

    <ion-tab title="Leagues" icon="ion-home" href="#">
        <ion-view></ion-view>
    </ion-tab>

    <ion-tab title="My Teams" icon="ion-star" href="#">
        <ion-view></ion-view>
    </ion-tab>

</ion-tabs>

menu-layout.html

<ion-side-menus>

    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-balanced">
            <button menu-toggle="left" class="button button-icon icon ion-navicon">
            </button>
        </ion-nav-bar>
        <ion-view></ion-view>
    </ion-pane>

    <ion-side-menu side="left">
    </ion-side-menu>

</ion-side-menus>

I would like know where the problem is.

Thanks


#2

@eddyfreeman
menu-layout.html

<ion-side-menu side="left">
</ion-side-menu>

I see you don’t show anything in left menu --> Menu does’t display.
You must add more code in there:

<ion-side-menu side="left">
  <header class="bar bar-header bar-balanced" >
    <h1 class="title">Elite Schedule</h1> 
  </header>
  <ion-content class="has-header" >
      <ion-list>
		 <ion-item nav-clear menu-close ui-sref="home">Home</ion-item>
		 <ion-item nav-clear menu-close ui-sref="#">ABC</ion-item>
		 <ion-item nav-clear menu-close ui-sref="#">DEF</ion-item>
       </ion-item>
	 </ion-list>
 </ion-content>