Menu button does not show menu once collapsed

[gp2]

Using anvil server on local machine and having the app that uses new slot functionality for the forms template the menu button doesn’t show the menu when its collapsed:

It works fine when hosted on Anvil cloud.
It works fine when hosted on local server and running the app on mobile device.
It doesn’t work when hosted on local server and running the app on pc web browser.

Once the hamburger button is clicked it collapses the menu but another click does nothing, the menu stays collapsed.

Is this some known bug when hosting locally?

[gp2]

Hey guys, bumping up this thread.
Did no one else experience this so far?

[anthonys]

Hi @gp2! I think you’re question is lacking a bit information for people to feel confident to respond.

Here is a guide on what information would help:

How to ask a good question

Welcome to the Q&A Forum! Help each other by asking questions about Anvil, and answering other people’s. Post each question as a new topic - and if someone helps you, don’t forget to say thank-you. Try to provide information to help people answer your questions: Be specific about what you’re trying to do. Be specific about what your problem is (eg what’s not working), and what you have already tried. Include code samples if you can. It often helps if you can share your app’s source code and …

[gp2]

Really? I thought there is enough info provided. Maybe the reason is not so many guys host the server themself and do not have yet many apps that uses new layout feature that got introduced recently.

[anthonys]

That might be it! I think, especially with new features, a sample application or code snippet could speak to the application of your slots.

[gp2]

Right hand side hosted on Anvil, works as expected.

• First click on hamburger button and menu collapses, another click it expands.

Left hand size hosted locally using Anvil App Server (latest version 1.10.1. tested on different operating systems: Ubuntu and Windows, and multiple different web browsers).

• First click on hamburger button and menu collapses, another click and nothing happens.

I hope now its clear whats the issue

[anthonys]

You could add a custom button to open and close your sidebar like so

Login

This will do two things:

1. Potentially be a work-around until you resolve the underlying issue
2. Reveal if the issue is in the conditional statement checking if the left-nav element exist or in the showSidebar function.

  $('.sidebar-toggle, .nav-shield').off('click').on('click', function() {
    var ln = $('.structure > .nav-holder > .left-nav');
    if (ln.is(":visible") || $('.nav-shield').is(".shown")) {
      hideSidebar();
    } else if(!ln.is(":empty")) {
      showSidebar();
    }
  });

[gp2]

Ok, so the custom button you proposed works as expected when added to my app.
Why the built in hamburger button does not?

[anthonys]

That, to me , suggestion something about your local version is not removing the left-nav element from the DOM when hiding the side bar because that is the logic that triggers the showSidebar() function.

You could add logic to the html, similar to the custom button that updates a flag as well, as a work around, although it’s much less dynamic. I’m not sure the root cause though.

[gp2]

I can submit this as a bug in the github repo for the anvil app server but I would like to be sure more people are experiencing same issue when hosting locally apps with new layout feature.

Just to add old type of apps without that “slot” functionality work as expected when hosted locally.

[cbruffin121]

I’m having some major issues with this new version. The app relies on anvil_extras. Everything works as expected on NEW version if hosting via anvil. The anvil app server fails miserably. I have forms that are out of place, I have many components that should be invisible showing up (and vice versa). The scaling does not match what I have in the anvil-hosted version. The one way to fix is for me to manually go into the anvil.yaml file and change the version to “2” and comment out the legacy features line. Everything else works as expected when I do this (including the hamburger menu correctly expanding/collapsing the side menu).