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

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.

[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')
}

[siutau]

Only you need to add when="false" in ion-menu-toggle

Example:

<ion-split-pane contentId="main-content" when="false">...</ion-split-pane>