How to always collapse split pane menu panel


#1

When I use the split pane with a menu in the left side, resizing the device (or browser window) shows and collapses the menu based on breakpoints (it appears its auto-collapsed below 768px width.

How do I disable this? I want it to always be collapsed unless the user taps the menuToggle button.

Example:

When I open the app on a small device the menu starts collapsed. Tapping the menuToggle button opens it.

When I open the app on a larger device the menu starts expanded and the menuToggle button never displays.

I want ALL device sizes to behave like small devices.

I see nothing that allows me to configure this behavior.


#2

Never mind. I finally found it in the component’s inline docs.

<ion-split-pane [when]=“false”>

That will always collapse the sidebar on app startup.


#3

What would be the programmatic equivalent of [when]=“false”?


#4

Answering my own question: according to https://ionicframework.com/docs/api/components/split-pane/SplitPane/

[when] can take a method like so:

<ion-split-pane [when]="shouldShow()">
...
</ion-split-pane>
class MyClass {
  constructor(){}
  shouldShow(){
    if(conditionA){
      return true
    } else {
      return false
    }
  }
}