In my page I have two Material Design Component drawers with the same items. One is permanent for desktop/tablet display, the other is hidden/modal for mobile display.
<aside class="mdc-drawer mdc-drawer--permanent">
<div class="mdc-drawer__header">
<h3 class="mdc-drawer__title">App</h3>
<h6 class="mdc-drawer__subtitle">@username</h6>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list--permanent">@menu_drawer_content</nav>
</div>
</aside>
<aside class="mdc-drawer mdc-drawer--modal">
<div class="mdc-drawer__header">
<h3 class="mdc-drawer__title">App</h3>
<h6 class="mdc-drawer__subtitle">@username</h6>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">@menu_drawer_content</nav>
</div>
</aside>
Both are initialised:
modalDrawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer--modal'));
let list = mdc.list.MDCList.attachTo(document.querySelector('.mdc-list--permanent'));
list.wrapFocus = true;
I have javascript that toggles one over the other:
let smallForm = window.matchMedia("(max-width: 767px)").matches;
function resized() {
let smallForm_ = window.matchMedia("(max-width: 767px)").matches;
if (smallForm !== smallForm_) {
smallForm = smallForm_;
changedMedia();
}
}
function changedMedia() {
let drawerButton = $('.mdc-top-app-bar__row > section > button');
if (smallForm) {
$('.mdc-drawer--permanent').hide();
drawerButton.show();
} else {
$('.mdc-drawer--permanent').show();
drawerButton.hide();
modalDrawer.open = false;
}
}
A bug that remains is that selecting an item on one drawer does not select the same item on the other drawer. If I transition from one size to another the selected item will not match the content.
Can I link the two drawers such that selection on one will change the state of the other (especially without triggering events on the "other" drawer or entering a recursive loop cross-notifying loop)?
Edit: Added bounty. Full source.