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.

3 thoughts on “Hack to make Ionic 3 Menu component static (keeping the menu open and ignoring backdrop and content clicks)”
    1. Generally you have your markup on the same level as , which typically resides in the app.component.* files of an Ionic project.

      Thus, it would be consistent to put the changes to your menu in app.component.ts, but theoretically the changes could go in any module that is provided a MenuController.

Leave a Reply

Your email address will not be published. Required fields are marked *