How can I stop slideout on subsequent page load?

Question

For my website, I have the mmenu configured to open fully on larger screens but collapse down on smaller screens. However, one somewhat annoying aspect is that the menu slides out on each new page load, even when navigating between pages within the same site.

I've reviewed the documentation but have not been able to find any mention of how to prevent the mmenu from automatically expanding on every page change when browsing internally. It would be preferable to have it remain open between internal pages to provide a more seamless experience.

Does anyone know if there is a setting or option available to control this default expanding behavior? Maintaining the menu state across internal page loads could improve the usability and feel of the site on smaller screens. Any suggestions for resolving this issue would be greatly appreciated.

I use this addon. Here is my code.

/mmenu

document.addEventListener(
  "DOMContentLoaded", () => {
      const menu = new Mmenu( "#menu", {
        "navbar" : {
          "title": " "
        },
         "theme": "white",
         "iconbar": {
            "use": true,
            "top": [
               "<a href='#/'><i class='fa-solid fa-house'></i></a>",
            ],
            "bottom": [
               "<a href='#/'><i class='fa-regular fa-envelope'></i></i></a>",
               "<a href='#/'><i class='fa-brands fa-linkedin-in'></i></a>"
            ]
         },
         "sidebar": {
          "collapsed"    : {
            "use": "(min-width: 250px)"
          },
          "expanded"    : {
            "use": "(min-width: 1200px)",
            "initial" : "open"
          }
        },
      });
}
);

Answer 1

I recently tested your provided code example, but unfortunately, it didn't yield the expected results. However, I found a simple solution for anyone encountering a similar issue. By encapsulating the mmenu element within a and specifying a width for that div, the slide-out functionality and animation ceases while the other functionalities remain intact.

HTML

<div class="mmwrapper">
<nav id="menu">
<!-- Rest -->
</nav>
</div>

CSS

.mmwrapper  {
    width: 440px !important;
}