widescreen support

I'm also hoping to get this working. On the widescreen documentation page (http://mmenu.frebsite.nl/documentation/extensions/widescreen.html), in addition to adding the widescreen CSS link you're also directed to "add "widescreen" to the extensions option". From the extensions documentation page (http://mmenu.frebsite.nl/documentation/extensions/), it looks like this is done by adding the word "widescreen" (or whatever extension you're adding) to the code like so:

<script type="text/javascript">
   $(document).ready(function() {
      $("#mmenu_left").mmenu({
         extensions: ["widescreen"]
      });
   });
</script>

I think the piece we need (in addition to the widescreen CSS file and media query) is the Javascript to include the widescreen extension; anyone know in which file to place the Javascript? I've experimented in the standard Drupal JS places without success, and I'm suspecting `extensions: ["widescreen"]` needs to be added into one of the mmenu module files or library.

Thanks for this fantastic module and any advice!

This issue has a later duplicate at https://www.drupal.org/node/2428811 (check out that issue for a hack that makes this partway work).

I'm going to pop my question out to a separate issue as I've become interested in adding mmenu extensions in general (not just widescreen). The general extension issue is here: https://www.drupal.org/node/2505657 I'm suspecting that the JS can indeed be put in an obvious place (e.g. HTML head on the tpl.php), and I just haven't got it in the right order vs. the other Mmenu JS and/or I'm not using the correct Mmenu element in the JS.

FWIW, I've gotten the widescreen behavior to work without using the extension JS by:

• Using the widescreen extension's CSS (with some tweaks, see below)
• Using CSS to shrink the #mm-blocker (usually overlays the non-menu part of the page when the mmenu is open and blocks you from interacting with the page) into the icon you click on to close the mmenu on small screens (see below). You'll need to mess around with the menu and page z-indexes to make the icon appear over the mmenu.
• Adding an icon to open the mmenu on click; this icon is hidden on the widescreen via media query.
• Enabling off-canvas menu, and click-to-open

Turning the mmenu page overlay (#mm-blocker) into a click-to-close icon:

#mm-blocker {
display: none !important; 
}

I also moved it out of the media query and into my custom CSS file so that it was never blocking interaction with the rest of the page (I wanted users to be able to highlight and annotate text on the page while the mmenu is open).

     /* Keeps menu visible on widescreens */
    .mm-menu.mm-front, .mm-menu.mm-next {
    -webkit-transform: none !important;
      -moz-transform: none !important;
      -ms-transform: none !important;
      -o-transform: none !important;
      transform: none !important;
    }

Neither did I got it running natively. Cost me half a day, but didn't found out why the mmenu with widescreen wouldn't show any content initially. Something went wrong with its open event. It seems to not fully fire somehow. Finally got rid of the widescreen.css, but let the 'widescreen' in the mmenu()-config to have its classes. Then I had the following CSS added, done.

@media (min-width: 1430px) {
  
  .mm-menu.mm-widescreen {
    display: block;
    width: 230px !important;
  }
  
  .mm-slideout {
    width: calc(100% - 230px) !important;
    margin-left: 230px !important;
  }
  
}