javascript - 2 つの MDC ドロワーの同期

Question

私のページには、同じアイテムを持つマテリアル デザイン コンポーネントの引き出しが 2 つあります。1 つはデスクトップ/タブレット表示用に永続的であり、もう 1 つはモバイル表示用に非表示/モーダルです。

<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>

どちらも初期化されます:

modalDrawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer--modal'));
let list = mdc.list.MDCList.attachTo(document.querySelector('.mdc-list--permanent'));
list.wrapFocus = true;

私は、一方を他方に切り替えるJavaScriptを持っています:

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;
    }
}

残っているバグは、1 つのドロワーで項目を選択しても、他のドロワーで同じ項目が選択されないことです。あるサイズから別のサイズに移行すると、選択したアイテムがコンテンツと一致しなくなります。

2 つのドロワーをリンクして、一方を選択すると他方の状態が変わるようにすることはできますか (特に、「もう一方の」ドロワーでイベントをトリガーしたり、再帰ループのクロス通知ループに入ったりすることなく)。

編集：賞金を追加しました。完全なソース。