How do I hide the left sidebar by default?

Anvil Q&A
1

Hi everyone

What I’m trying to do:

Make it so the hamburger sidebar on the Material Design theme is in the hidden state upon page load by default instead of in the visible state. The image below is what I want it to look like on page load:

hidden sidebar
hidden sidebar688×833 9.73 KB

What I’ve tried and what’s not working:

Tinkering with the javascript below, from the standard-html

I also tried ‘self.call_js(‘hideSidebar’)’ on init, threw the following error:

NameError: Could not find global JS function ‘hideSidebar’. This form is not currently visible - to call functions defined in its HTML on load, use call_js in the form ‘show’ event handler.

Can anyone show me what I should change to hide the sidebar by default on page load, or some other way?

Code Sample:

<script>
  function hideSidebar() {
    var ln = $('.structure > .nav-holder > .left-nav');
    ln.animate({left: -ln.outerWidth()}, function() {
      ln.removeClass("in-transition shown").addClass("hidden");
    $('.nav-shield').removeClass("shown");
    });
  }
  function showSidebar() {
    var ln = $('.structure > .nav-holder > .left-nav');
    $('.nav-shield').addClass("shown");
    ln.addClass("shown").removeClass("hidden").css({left: "-100%"}).css({left: -ln.outerWidth()}).animate({left: 0}, function() {
      ln.removeClass("in-transition");
    });
  }
  $('.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();
    }
  });
  $('.left-nav').off('click').on('click', 'a, button', function() {
    if ($('.nav-shield').is(":visible")) {
      $('.nav-shield').trigger('click');
    }
  });
</script>

Thanks,

Richard

3

Have you tried the form_show event? Otherwise you can also go for timer although that is just unnecessary.

4

you can also make a small adjustment to the standard page. If you find the div with left-nav and add hidden to the class

    <div class="left-nav anvil-measure-this hidden" anvil-slot-repeat="left-nav" anvil-drop-container=">.anvil-container">
4 Likes