How to hide drawer upon user click

Question

How do I hide the drawer when the user clicks on an item? Or when a button is clicked?

Answer 1

Showing and hiding the menu is as easy as adding and removing the .is-visible class as it can be seen in the source:

MaterialLayout.prototype.drawerToggleHandler_ = function() {
  'use strict';

  this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
};

So you would have something like this:

function toggle_drawer() {
  var drawer = document.getElementsByClassName('mdl-layout__drawer')[0];
  drawer.classList.toggle("is-visible");
}

I was hoping for a more convenient method of the MaterialLayout widget, but the best that I came up with was:

var layout = document.getElementsByClassName('mdl-layout')[0];
layout.MaterialLayout.drawerToggleHandler_();

although this happens to be working, that _ at the end of the method name shows that this function is not supposed to be (mis)used as a public API method.