Navigation inside ion-side-menu

ionic-v1
1

Hello, I am wondering if it is possible to have a navigation inside the ion-side-menu. I have the following structure in my ion-side-menu:

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item href="#/menu/outbox" class="font-left-menu item-icon-right">
          Outbox <i class="icon ion-chevron-right icon-acessory accessory-size"></i>
        </ion-item>
        <br>
        <ion-item href="#/menu/settings" class="font-left-menu item-icon-right">
          Settings <i class="icon ion-chevron-right icon-acessory accessory-size"></i>
        </ion-item>
        <ion-item href="#/menu/about" class="font-left-menu item-icon-right">
          About <i class="icon ion-chevron-right icon-acessory accessory-size"></i>
        </ion-item>
        <br>
        <ion-item menu-close href="#/logout">
          Exit
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

And what I would like to do is navigate to an inner page (inside the proper menu). Something like what you can see here:

image
IMG_4286.png1300×1136 43.8 KB

I have read a lot of people talking about the navigation in the main content area, but what I am trying to do is navigate in the side menu view.

2

Where you able to solve this? I’m looking at doing the same at the moment

3

Unfortunately no. I could not find a viable solution that worked exactly like this. What I did for the moment is to have ng-hide handling the issue to me hiding or showing the content I need:

<ion-content>
  <ion-list ng-hide="itemSelected == 2">
    <ion-item class="font-left-menu item-icon-right" ng-click="selectItem(2)">
      {{'about' | translate}} <i class="icon ion-chevron-right icon-acessory accessory-size"></i>
    </ion-item>
    <br>
    <ion-item ng-click="selectItem(3)" menu-close>
      {{'exit' | translate}}
    </ion-item>
  </ion-list>

  <div ng-hide="itemSelected != 1" class="padding">
    <p>Here goes the Outbox page.</p>
  </div>

  <div ng-hide="itemSelected != 2">
    <ul class="list">
      <li class="item item-toggle">
        {{'useCellularData' | translate}}
        <label class="toggle menu-toggle-width">
          <input type="checkbox" ng-model="useCellularData.value" ng-checked="useCellularData.value" ng-change="setUseCellularData()">
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </li>
      <li class="item item-text-wrap" style="background-color: #fafafa;">
        <p>{{'restrictDataWiFi' | translate}}</p>
      </li>
    </ul>
  </div>

  <div ng-hide="itemSelected != 2" class="padding">
    <div class="col col-100 app-icon-info"></div>
    <div class="row" style="text-align: center;">
      Here goes about text.
    </div>
  </div>
</ion-content>

I know that is not the best solution, but as we did not have a lot of items and content to show in the side menu, it supplies our needs. I still want to go back to this, but I did not yet.