How do I hide the drawer when the user clicks on an item? Or when a button is clicked?
I have no idea how to get the "MaterialLayout" inside my Angular 6 project, but I took their prototype function and used it in my component:
toggleDrawer = function () {
var is_drawer_open = 'is-visible'
var drawerButton = document.querySelector('.mdl-layout__drawer-button');
var drawer_ = document.querySelector('.mdl-layout__drawer');
var obfuscator_ = document.querySelector('.mdl-layout__obfuscator');
drawer_.classList.toggle(is_drawer_open);
obfuscator_.classList.toggle(is_drawer_open);
// Set accessibility properties.
if (drawer_.classList.contains(is_drawer_open)) {
drawer_.setAttribute('aria-hidden', 'false');
drawerButton.setAttribute('aria-expanded', 'true');
} else {
drawer_.setAttribute('aria-hidden', 'true');
drawerButton.setAttribute('aria-expanded', 'false');
}
};