Side menu always open

Ionic Framework ionic-v3
1

Hi,
I’m building an app for tablets and i need to have the side menu always open.
I managed to open it every time with this.menuCtrl.open(); since there is no expose-aside-when in ionic 2
But when i click anywhere on the page the menu closes.

How can i disable this behavior?

Thank!

2

Hi Ionic Team,

i have the same Problem for a Desktop Application. Can someone please post some code snippet for a solution.

Thanks,
Daniel

3

Is there no Solution?

4

Check this example. It is in Ionic 1, similar approach should work in ionic 2 as well.

5

i’ve found a solution but cant find the link again…
But basically i’ve got this in my app:
app.component.ts

this.platform.ready().then(() => {
      this.setWidth();
    });

setWidth() {
if (this.platform.width() > 1) {
    this.wide = true;
    this.menuCtrl.open();
} else {
    this.wide = false;
    this.menuCtrl.close();
}};

app.html

<ion-menu [content]="content" type="overlay" swipeEnabled="false" id="leftmenu">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content [menuClose]="wide">
    content..
  </ion-content>
</ion-menu>

and my scss:

@media (min-width: 1px) {
    ion-page{
        margin-left: 15%;
        width:100%;
    }
    ion-menu{
        width:15%;
        display:block;
    }

    .bar-button-menutoggle {
        display: none;
    }

    ion-menu ion-backdrop {
        display:none;
    }
    ion-content {
        border-left: none;
    }
    ion-menu[type=overlay] .menu-inner {
        -webkit-transform: translateX(0px)!important;
        transform: translateX(0px)!important;
        box-shadow: none;
        width:100%;
        z-index: 0;
  }
}

Hope this will help you

1 Like
6

Awesome Thanks. I test your code.

7

http://blog.ionic.io/testing-split-pane-support/

1 Like
8

I have had good success doing this with CSS but am trying this out in case it becomes de facto.
I get the error ‘split panel needs two valid roots’

Using the sidemenu template, I have tried to set Page2 as the second root but it is not working.
Do you have a quick example of how to do this?
I have tried:

<ion-split-panel when="sm">
<ion-menu [content]="content">
    <ion-nav [root]="root2"></ion-nav>
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>
        <ion-list>
            <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
    {{p.title}}
  </button>
        </ion-list>
    </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
9

I am having the same problem as @shepard on the Super Starter template.

10

if you want to use <ion-split-panel>,
you need to insert “main” property in <ion-nav> tag like this.

wrong : <ion-nav [root]=“rootPage” #content swipeBackEnabled=“false”>
correct : <ion-nav [root]=“rootPage” #content main swipeBackEnabled=“false”>

please refer this file : https://github.com/driftyco/ionic/blob/split-panel/src/components/split-panel/test/basic/main.html

1 Like
11

Exactly, at least one panel must be set as the main one.

// ion-menu + ion-nav
<ion-split-panel>
    <ion-menu>/** content **/</ion-menu>
    <ion-nav [root]="root" main></ion-nav>
</ion-split-panel>

// ion-nav + ion-nav
<ion-split-panel>
    <ion-nav [root]="root2"></ion-nav>
    <ion-nav [root]="root" main></ion-nav>
</ion-split-panel>

// ion-nav + ion-tabs
<ion-split-panel>
    <ion-nav [root]="root2"></ion-nav>
    <ion-tabs main>/** content **/</ion-nav>
</ion-split-panel>

// even nested split panel!
<ion-split-panel>
    <ion-menu>/** content **/</ion-menu>
    <ion-split-panel main>/** content **/</ion-split-panel>
</ion-split-panel>

Documentation should be available soon.

1 Like
12

Yup, that works for me.
Will compare to working css version.

13

Having trouble making the sidemenu display only beneath the header.
image
Any suggestions?

14

Can anyone explain how to make panel 1 trigger a navigation in panel 2? I tried using ViewChilds in my app.component to grab both child navs and store them in a service. But that seems real shady, and there doesn’t seem to be a good way to wait until the page is loaded to store them.