2

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?

kollew
  • 41
  • 3
  • Opened up the demo advanced.html in Firefox 101.0, Chrome 102.0.5005.63 and Edge 102.0.1245.30. Could not reproduce your problem in any of these 3 browsers. It could be that the issue only appears on mobile devices though. Haven't tested those. – icecub Jun 03 '22 at 08:32

1 Answers1

0

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.

icecub
  • 8,615
  • 6
  • 41
  • 70
  • Thank you for your answer, but it does not solve the problem. I want the mmenu to be expanded over 1440 because it behaves differently with the content (no overlay, contentarea not pushed away and therefore accessible) - as it can also be seen on the mmenu website. But unlike this I want the expaned menu to be initially closed. Works like a charme with the initial: "closed", but not if I reenter the page from another tab or minified window. – kollew Jun 03 '22 at 11:07