Override "hamburger" menu behaviour in material design

Anvil Q&A
#1

What I’m trying to do:

Is it possible to override the behaviour of the hamburger menu in material design so that instead of collapsing the menu it just shows a minimised view with icons?

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

I am not sure where to look to be honest, I have a feeling I need to play with the default theme, probably need a pointer in the right direction.

#2

The hamburger click event is a js method inside your html. If you use the standard HTML, then if you check your assets, in the standard-page.html you’ll find the following:

<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");
      $(window).trigger('resize');
    });
  }
  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");
    });
    $(window).trigger('resize');
  }
  $('.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>
1 Like
#3

Thanks @gabriel.duro.s I will do some playing with it

1 Like