Hack to make Ionic 3 Menu component static (keeping the menu open and ignoring backdrop and content clicks)

The current behaviour of the Ionic 3 Menu component doesn’t allow the menu to stay open if the user interacts with other content in the app.

There are a couple of reasons to want a static menu, with the content still in full view:

• Desktop web apps have sufficient space to show a menu and content simultaneously and we want a drawer to mimic a SplitPane
• Mobile web apps may want an icon-only menu on the side that can be swiped in-and-out like a Toolbar

When the menu is of menuType push or reveal, the ion-nav element shifts to the right (for a left-sided menu), and the end of the content overflows off the screen. Similarly, when the menu is of menuType overlay, the ion-nav element is partially covered by the menu.

Here’s a quick hack to achieve a static menu, one that can be toggled by a button switch rather than the default backdrop or content-click dismissal or swiping the menu in-and-out:

import { Platform, MenuController } from 'ionic-angular';

// ... Other code

  constructor(menuCtrl: MenuController /* ... other code ...*/)

// ... Other code

  let menu = menuCtrl.get();
        
  menu.swipeEnable(false); // Disable drag to open/close

  // Override default behaviour of closing the menu on 
  // content or backdrop click
  menu['onBackdropClick'] = () => {
    // No-op  
  };

  menu.ionOpen.subscribe(() => {
    // When the menu is open ...

    // Remove Ionic's CSS rules for menu-content-open class that restricts 
    // mouse events on ion-nav
    menu.getContentElement().classList.remove("menu-content-open");

    // Reduce the size of the content pane so that it does not
    // overflow off the screen
    menu.getContentElement().style.width = 
      `calc(100% - ${menu.getMenuElement().clientWidth}px)`;
  });

  menu.ionClose.subscribe(() => {
    // When the menu is closed ...

    // Restore the size of the content pane
    menu.getContentElement().style.width = '';
  });

You will also want to make sure you set the menuType to push so that the menu and content divide the space in ion-app, rather than the menu overlaying on top of the content.