CODEWITHSUNDEEP
angularionic2
didrod
didrod

Reputation: 119

ionic2 keeping side menu open

I'm working with ionic 2, and I have a ion-menu on the left side of the app, which keeps closing when I open the menu and touch to the page area.

I'd like to make it to keep opened and to close only when the user explicitly order to close it(via close button, or maybe swiping back, whatever). is there any option or workaround to doing like that?

EDIT: I started with ionic2-starter-sidemenu. when I run it, it looks like:

---------------------------------------------------------------
|           | <menuToggle button>                             |
|           |-------------------------------------------------|
|           |                                                 |
|           |                                                 |
|     /*    |                                                 |
| side menu |                                                 |
| toggled by|                                                 |
| menuToggle|           /* Content of each Pages */           |
|   button  |                                                 |
|     */    |                                                 |
|           |                                                 |
|           |                                                 |
|           |                                                 |
---------------------------------------------------------------

and when I click the page content area, the menu closes like this:

---------------------------------------------------------------
| <menuToggle button>                                         |
|-------------------------------------------------------------|
|                                                             |
|                                                             |
|                                                             |
|                                                             |
|                /* Content of each Pages */                  |
|                                                             |
|                                                             |
|                                                             |
|                                                             |
|                                                             |
---------------------------------------------------------------

I tried reading documentation and searched ionic forum, but found nothing to resolve it.

Upvotes: 5

Views: 5208

Answers (4)

Isaac Obella
Isaac Obella

Reputation: 2643

Hope this answer isn't too late. However ionic 2 now supports the splitplane that works exactly as you described. Its syntax is as:

<ion-split-pane>
  <!--  our side menu  -->
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-nav [root]="root" main #content></ion-nav>
</ion-split-pane>

enter image description here

Upvotes: 2

Coldstar
Coldstar

Reputation: 1341

Here is a quick hack until they release an update:

First: Remove menuClose from any of your current side menu buttons

Then in app.component.ts call the MenuController:

constructor(public menuCtrl: MenuController, public platform: Platform) {...

...
initializeApp() {
    this.platform.ready().then(() => {
        this.menuCtrl.open();
    });
}

This does 2 simple behaviors that expose-aside-when did basically:

  • opens the menu when the app is loaded
  • prevents any nav buttons from closing the menu

Upvotes: 3

Darren Shewry
Darren Shewry

Reputation: 10410

To stop the menu from closing you can remove the menuClose attribute/directive in app.html (here's a link to it in the reference project source)

i.e. this menuClose bit: 

<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">

Here's some more info on the MenuClose directive, and note that you can close the menu programmatically too.

Also, depending on the menu type you're using, you may find the reveal works better than the default overlay mode.

Upvotes: 0

Manspof
Manspof

Reputation: 357

try this, it works well for me:

<ion-navbar >
  <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title></ion-title>
  <ion-buttons start>
    <button ion-button (click)="func1()">
      <ion-icon name="add-circle"></ion-icon>
    </button>
    <button ion-button (click)="func2()">
      <ion-icon ios="ios-exit" md="md-exit"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

Upvotes: 0

Related Questions