Need mmenu to react differently on desktops and mobile devices

Question

I have mmenu all setup and working perfectly on mobile devices but want the desktop to behave differently.

Mobile Devices:

• Closed on page load
• Dims the other part of the screen
• Moves the page content when opened
• Can be opened or closed via a css burger icon

Desktop:

• Open on page load (no transition, just fully open and static)
• No Dimming
• No moving the page content when opened
• Always open, cannot be closed

I think I'm looking for the offCanvas options for desktops (not entirely sure) but cannot figure out how to do a media query to put in different parameters in the javascript based on screen size.

Perhaps I'm thinking of it wrong and there's another way to accomplish this? Would love some help here.

Answer 1

As I already had the mobile devices working exactly the way I wanted, but needed the desktop to respond differently, here is how I made it work (configuration described above in the original post):

The first thing I did was wrap the entire js to fire the plugin in a function with an if/else media query as follows:

        <!-- Fire the plugin -->

        <script>
function mediaqueryresponse(x) {
if (mql.matches)
             {
            document.addEventListener(
                "DOMContentLoaded", () => {
                   new Mmenu( "#navmenu", {
                       "openingInterval": 0,
                       "transitionDuration": 0,
                       "sidebar": 
                          {
                          "expanded":
                              {
                              "use": true
                              }
                          },
                       "offCanvas": ["false"],
//                          {
//                          "blockUI": false,
//                          "moveBackground": false
//                          },
                       wrappers: ["bootstrap"],
                       "extensions": [
                          "position-front",
                          "fx-panels-none",
                          "theme-dark"
                       ],
                       "navbar": 
                          {
                                "title": "MY MENU"
                          },
                       "navbars": [
                          {
                             "position": "top",
                             "content": [
                                "prev",
                                "title"
                             ],
                          },
                          {
                             "position": "bottom",
                             "content": [
                                "<a class='fa fa-envelope' href='mailto:webmaster@foo.com'></a>",
                                "<a class='fa fa-twitter' href='https://www.twitter.com/foo'></a>",
                                "<a class='fa fa-facebook' href='fb://profile/13435468413'></a>"
                             ]
                          }
                       ]
                    });
                }
            );
}
else
             {
            document.addEventListener(
                "DOMContentLoaded", () => {
                    new Mmenu( "#navmenu", {
                       wrappers: ["bootstrap"],
                       "extensions": [
                          "position-front",
                          "pagedim-black",
                          "theme-dark"
                       ],
                       "navbar": 
                          {
                                "title": "MY MENU"
                          },
                       "navbars": [
                          {
                             "position": "top",
                             "content": [
                                "prev",
                                "title"
                             ],
                          },
                          {
                             "position": "bottom",
                             "content": [
                                "<a class='fa fa-envelope' href='mailto:webmaster@foo.com'></a>",
                                "<a class='fa fa-twitter' href='https://www.twitter.com/foo'></a>",
                                "<a class='fa fa-facebook' href='fb://profile/13435468413'></a>"
                             ]
                          }
                       ]
                    });
                }
            );
}
}
var mql = window.matchMedia("screen and (min-width: 900px) and (orientation:landscape)")
mediaqueryresponse(mql) // call listener function explicitly at run time
mql.addListener(mediaqueryresponse) // attach listener function to listen in on state changes
        </script>

The CSS code you need to modify is:

.mm-menu_position-front {
transition: transform 0s ease,-webkit-transform 0s ease !important;
}

.mm-wrapper_sidebar-expanded:not(.mm-wrapper_sidebar-closed) .mm-menu_sidebar-expanded.mm-menu_opened~.mm-slideout {
width:100% !important;
-webkit-transform:translate3d(0,0,0) !important;
transform:translate3d(0,0,0) !important;
width:100% !important;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

Remember to also insert that same css into your mobile stylesheets so the mobile devices can respond differently. For example, I set it all back to mmenu's defaults by inserting the following code into my mobile stylesheets:

.mm-menu_position-front {
transition: transform .4s ease,-webkit-transform .4s ease !important;
}

.mm-wrapper_sidebar-expanded:not(.mm-wrapper_sidebar-closed) .mm-menu_sidebar-expanded.mm-menu_opened~.mm-slideout {
width:(100% - 440px);
-webkit-transform:translate3d(440px,0,0);
transform:translate3d(440px,0,0);
width:calc(100% - var(--mm-sidebar-expanded-size));
-webkit-transform:translate3d(var(--mm-sidebar-expanded-size),0,0);
transform:translate3d(var(--mm-sidebar-expanded-size),0,0);
}