mdc Web抽屉，根据所选列表项更改内容

Question

我有这样的mdc-drawer--modal：

使用此类HTML：

    <aside class="mdc-drawer mdc-drawer--modal">
        <div class="mdc-drawer__header">
            <h3 class="mdc-drawer__title">Menu</h3>
            <h6 class="mdc-drawer__subtitle">Voice Studio</div>
        <div class="mdc-drawer__content">
            <nav class="mdc-list">
                <a class="mdc-list-item" href="#" tabindex="0" aria-selected="true">
                    <i class="material-icons mdc-list-item__graphic" aria-hidden="true">add_box</i>
                    My Ideas
                </a>
                ...
                ...
            </nav>
        </div>
    </aside>

现在，我想在用户选择一个抽屉项目时更改应用程序内容，但我不知道最佳做法是什么。我正在查看MDC-Web文档，但找不到示例。到目前为止，我已经尝试过使用此JS代码来确定选择了哪个列表项，但这并没有记录任何要控制台的内容，这也不是最佳实践：

const drawerListEl = document.querySelector('.mdc-drawer').querySelector('.mdc-list')
const drawerList = new mdc.list.MDCList(drawerListEl)
window.drawerList = drawerList
drawerList.foundation_.handleClick = evt => {
    console.log(drawerList.foundation_.adapter_.getFocusedElementIndex())
}