Problem with side menu left and right

ionic-v1
1

I’m building an app that have when logged, two side menu (one left and one right obiuvsly).
But before login i would only one left sidemenu.
So I have mainMenu template like this:

<ion-side-menus>
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-black nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="appContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>
  <ion-side-menu side="left">
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu>
  <ion-side-menu side="right">
    <ion-nav-view name="menuChat"></ion-nav-view>
  </ion-side-menu>
</ion-side-menus>

before login I inject only menuContent:

<ion-side-menu side="left">
  <header class="bar bar-header bar-stable">
    <h1 class="title">OPZIONI</h1>
  </header>
  <ion-content class="has-header">
    <ion-list>
      <ion-item nav-clear menu-close ng-click="logout()"> Logout </ion-item>
      <ion-item nav-clear menu-close href="#/app/profilo"> Profilo </ion-item>
      <ion-item nav-clear menu-close href="#/app/photo"> Photo </ion-item>
      <ion-item nav-clear menu-close href="#/app/capacity"> Professionalità </ion-item>
      <ion-item nav-clear menu-close href="#/app/mappa"> Dove ti trovi </ion-item>
      <ion-item nav-clear menu-close href="#/app/punteggi"> Punteggi </ion-item>
      <ion-item nav-clear menu-close href="#/app/attivita"> Archivio attività </ion-item>
      <ion-item nav-clear menu-close href="#/app/ricerca"> CERCA AIUTO </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu>

and when login I inject also menuChat:

<ion-side-menu side="right">
  <header class="bar bar-header bar-stable">
    <h1 class="title">CHAT</h1>
  </header>
  <ion-content class="has-header">
    <ion-list>
      <ion-item nav-clear menu-close href="#/app/messaggi">MESSAGGI</ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu>

But in browser and in app when I login I see the right menu overlap left menu (like a black effects! I check the css and I notice that the z-index dont change in left menu!

Why?

2

I don’t know if it’s a bug or not but the problem of overlapping right and left menu there’s only when I inject template both on left and right. So I change my main template so:

<ion-side-menus>
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="appContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>
  <ion-side-menu side="left">
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu>
  <ion-side-menu side="right">
    <header class="bar bar-header bar-stable">
      <h1 class="title">CHAT</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close href="#/app/messaggi">MESSAGGI</ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

and I inject only “appContent” and “menuContent”.