Ionic-framework: feat: toggle menu when ion-split-pane is visible

[IsaacHub]

I'm using <ion-split-pane> and I need the menu toggle button on all screen sizes, how can I achieve this?

In desktop toggle menu doesn't appear, and <ion-menu-button></ion-menu-button> exists in all pages' toolbar.

Toggle menu only show up in the mobile view, but I want this in desktop view also.

[joelmeaders]

I had the same problem and found a fix. Previously I was just using:

<ion-buttons>
    <ion-menu-button></ion-menu-button>
        ...other code
</ion-buttons>

To fix it, I am now using:

<ion-buttons>
    <ion-menu-toggle color="light">
        <ion-menu-button color="light"></ion-menu-button>
    </ion-menu-toggle>
        ...other code
</ion-buttons>

...Sorry for all the edits lol

[brandyscarney]

Thanks for the issue! If you just want the ion-menu-button to always show, you can add the auto-hide attribute / autoHide property to the element.

I'm not sure what framework you're using, but in vanilla JS it would be:

<ion-menu-button auto-hide="false">

and in Angular:

<ion-menu-button autoHide="false">

Documentation on menu button properties: https://ionicframework.com/docs/api/menu-button#properties

If you're running into the problem where there is a space even though the menu button is hidden, please subscribe to this issue: https://github.com/ionic-team/ionic/issues/18666

Thanks!

[IsaacHub]

@joelmeaders @brandyscarney You both completely got me wrong. I said I should be able to collapse and expand the side menu whenever I want. _(I'm talking about desktop browser only)_. It's possible only if the menu button shows up. This is my requirement.

I have another choice and get rid of ion-split-pane completely, and just use ion-menu without wrapping in ion-split-pane, but we have a problem with that also, it has only <ion-menu type="push | reveal | overlay"> these 3 options, and all these options pushes the content off-screen. This is not expected behavior.

I want the side-menu to be fixed, not overlay or something. It's unbelievable this tiny feature is missing from this popular framework.

[quynh-ng]

I still got this issue even upgrade to dev version of 4.6.1
In previous version, the ion-menu-button works correctly with ion-split-pane: hide on large screen and shown on small screen.
To get the expected behavior (in current dev version), need to wrap into ion-menu-toggle (just like the way of @joelmeaders does).
This is just a bug of ion-menu-button component @brandyscarney.

[brandyscarney]

@quynh-ng You are thinking of the following issue: https://github.com/ionic-team/ionic/issues/18666

This is fixed by https://github.com/ionic-team/ionic/pull/18702 but it has not been in a release yet.

[brandyscarney]

@IsaacHub Thanks, I can update your original issue, but it was not clear from your description.

[daveshirman]

Solution: For anyone wanting a right side menu that is always hidden in a SplitPane, just put it outside the SplitPane in your app.html. Then just programmatically show/hide it using MenuController.open/close.

This should be documented!

---

@IsaacHub Did you ever find a fix for this? I have a right side menu that I want to optionally show/hide on desktop, same as you do with your left.

@brandyscarney How this still not a documented feature is beyond me!

Thanks.

[joelmeaders]

@daveshirman I posted a detailed way to accomplish what you want here: https://github.com/ionic-team/ionic/issues/15538#issuecomment-479090705

[daveshirman]

@daveshirman I posted a detailed way to accomplish what you want here: #15538 (comment)

Thanks - I ended up (by chance) figuring out that you can just put the second menu outside the split pane and it works as I wanted, with the left menu collapsing as normal and the right one always hidden. See my edit. Don't know if that achieves anything different to your solution which I've read. Cheers!

Note: I see yours is V4, mine is V3.

[mickdelaney]

Is there a solution yet to the original problem ?
i.e. being able to collapse the menu on desktop ?

[joelmeaders]

Is there a solution yet to the original problem ?
i.e. being able to collapse the menu on desktop ?

If the menu is inside of a split pane use the "when" property on it. Pass in a boolean value of false. If it's false the menu is hidden on desktop unless it's swiped open or toggled. An observable in a singleton service does the trick nicely. It also plays nice with the toggle buttons and they're visible as they should be when the menu is not showing.

<ion-split-pane when="menuService.$showMenu | async">

You can also just pass in "false" right there in the HTML to quickly test it out.

[corysmc]

Here's my solution to this problem - works really well:

1. when on a mobile size screen - the menu toggles open and close
2. when on desktop the split pane displays the menu
3. The menu icon still displays so you can close the menu while on desktop

toggleMenu() {
    const splitPane = document.querySelector('ion-split-pane');
    const windowWidth = window.innerWidth;
    const splitPaneShownAt = 992;
    const when = `(min-width: ${splitPaneShownAt}px)`;
    if (windowWidth >= splitPaneShownAt) {
      // split pane view is visible
      const open = splitPane.when === when;
      splitPane.when = open ? false : when;
    } else {
      // split pane view is not visible
      // toggle menu open
      const menu = splitPane.querySelector('ion-menu');
      return menu.open();
    }
  }

Then in your view use an ion-button instead of the ion-menu-button:

<ion-buttons slot="start">
  <ion-button onClick={() => this.toggleMenu()}>
    <ion-icon name="menu" slot="icon-only" />
  </ion-button>
</ion-buttons>

[IsaacHub]

@corysmc I tried your code snippet, and it worked.

[cameronrr]

Add a click handler on the standard ion-menu-toggle button. Make sure 'auto-hide="false"' is set on the toggle so the button is always visible even in split pane mode.

In the event handler, check the ion-split-pane 'when' attribute against the ionic media query breakpoints (or directly if not using a breakpoint alias). If the screen width is large enough to usually show the split panel, toggle the visibility to toggle the menu display.

The default click handler to animate menu in single pane view still works as per normal.

<ion-buttons slot="start">
    <ion-menu-toggle auto-hide="false" menu="main-menu">
        <ion-button @click="toggleMenu">
            <ion-icon slot="icon-only" name="menu"></ion-icon>
        </ion-button>
    </ion-menu-toggle>
</ion-buttons>

import { SIZE_TO_MEDIA } from '@ionic/core/dist/collection/utils/media'

toggleMenu: () => {
    const splitPane = document.querySelector('ion-split-pane')
    if (window.matchMedia(SIZE_TO_MEDIA[splitPane.when] || splitPane.when).matches)
        splitPane.classList.toggle('split-pane-visible')
}