Problems with dual sidebars on mobile screens

Anvil Q&A
#1

I basically followed this post and edited my HTML and CSS files the same may. On screens wider than mobile this works fine but when the page gets loaded on a mobile-sized screens problems begin to happen. I believe the problem is in the JS that shows and hides the sidebars. Here is a link of the test app I’m working with.

Double Sidebar

To replicate the problem just run the app on a mobile-sized screen or on a mobile device. Click the hamburger menu icon. After the left sidebar opens you will be unable to close it by clicking off of it or by clicking any of the links. Next, click the right button in the navigation bar and the right sidebar will open. This sidebar will close if any link on either sidebar gets clicked but it will not close when you click off to the side. (Closing the sidebar when you click off or beside it is default anvil behavior and I would like both sidebars to do this as well)

I’m not that good with JS so this has me confused since it’s mainly the left sidebar that breaks and the JS that controls that sidebar has not been changed. It looks like the JS for the right sidebar is breaking both of them. Maybe it’s getting confused with the nav-shield and that’s making it break, I’m not sure what that even does.

Anyway, if you have any suggestions just let me know. Currently, I’m kinda stumped.

#2

Well, I had some time to look at the js and it looks like there were some problems with the way the nav-shield class works. I don’t understand js enough to know exactly what is going on but I figured I would try only allowing on sidebar to be open at once where the screen is rescaled to a mobile size. I just added some jquery that closes both left and right sidebars if the nav-shield is clicked.

$( ".nav-shield" ).click(function() {
  hideSidebar();
  hideRightSidebar();
});

This was the quickest fix I found, not sure if it’s the best but I’m going with it.
https://anvil.works/build#clone:KWS4PL4X46IWVQBH=RSB7XOB364OM2V5HRQEFCTLB

1 Like