Side menu always open


#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


#6

Awesome Thanks. I test your code.


#7

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


#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


#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.


#12

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


#13

Having trouble making the sidemenu display only beneath the header.

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.