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

To close it you need to check that it is open first, as there is no "closeDrawer". This is helpful when you cannot assume it is already open, like if you have a logout button within the drawer, and also outside, or in some session timeout function. You just need it closed to show the log-back-in form.

closeDrawer() {
    let drawer = document.querySelector('.mdl-layout__drawer');
    if (drawer && drawer.className.indexOf("is-visible")>-1) {
        toggleDrawer();
    }
}
toggleDrawer() {
    let layout = document.querySelector('.mdl-layout');
    if (layout && layout.MaterialLayout) {
        layout.MaterialLayout.toggleDrawer();
    }
}