mmenu Sidebar-Plugin not working properly (initial state closed)

Question

Im using the jquery mmenu plugin with the sidebar addon (https://mmenujs.com/docs/addons/sidebar.html). Unfortunately I'm having trouble getting the intital state to work properly.

const menu = new Mmenu(
    "#menu",
    {
        counters: {
            add: true,
        },
        iconPanels: {
            add: true,
            visible: "first",
        },
        navbar: {
            title: "...",
        },
        navbars: [
            {
                position: "top",
                content: ["searchfield"],
            },
            {
                position: "top",
            },
        ],
        setSelected: {
            hover: true,
            parent: true,
        },
        sidebar: {
            collapsed: {
                use: 768,
            },
            expanded: {
                use: 1440,
                initial: "closed",
            },
        },
        theme: "white",
    },
    {
        offCanvas: {
            page: {
                selector: "#page",
            },
        },
        searchfield: {
            cancel: true,
            clear: true,
        },
    }
);

Problem: If I open the html file for the first time (viewport > 1440px), the menu is closed (cool!). But if I switch to another tab in my browser or minimize the window and reenter, the menu opens. Seems to be related with the event "visibilitychange". You can test it, if you download the mmenu master (https://github.com/FrDH/mmenu-js/archive/master.zip) with the demos and open the advanced.html

As a little fix I can close the menu with the visibilitychange event, but if the user opens the menu, changes the tab and then go back, I don't want the menu to close!

const api = menu.API;
document.addEventListener("visibilitychange", function() {
  setTimeout(function() { api.close(); }, 50);
});

Any ideas?

Answer 1

This is the part of the code that you are looking for:

sidebar: {
    collapsed: {
        use: "(min-width: 768px)",
    },
    expanded: {
        use: "(min-width: 1024px)",
        initial: "closed",
    },
},

It sets the state of the menu. If the viewport >= 1024px, the initial state will be closed, but it'll open up the menu after 50ms. If the viewport is smaller, the state will remain closed.

Just change it to:

sidebar: {
    collapsed: {
        use: "(min-width: 768px)",
    },
    expanded: {
        use: false,
        initial: "closed",
    },
},

Then there will be no initial expanded state and the menu will simply be closed.

You can set collapsed to (min-width: 0px) or false to make sure it doesn't auto collapse either.