Opening MDCMenu from Button

Question

I want to open a MDCMenu with a button from the MDCTopAppBar. The documentation lacks sample code how to do this. So I'm trying to do this via EventListener. Please let me know if there are smoother ways to do so.

The EvenListener complains MDCMenu was not defined.

import {MDCMenu} from '@material/menu';
import {MDCTopAppBar} from '@material/top-app-bar';
import {MDCMenuSurface} from '@material/menu-surface';

const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new MDCTopAppBar(topAppBarElement);

console.log('hello world');

const menu = new MDCMenu(document.querySelector('.mdc-menu'));

document.querySelector('#menu-button').addEventListener("click", () => {
   menu.open != menu.open;
});

menu is defined as global constant here. How can it be that it is unknown to the console or this EventListener?

Clicking the button triggers the following in the console:

ReferenceError: MDCMenu is not defined localhost:8080:1:14
    onclick http://localhost:8080/:1

Something seems to be wrong with the import. But the EvenListener just refers to the instance, not the class. I don't understand why it would even need the MDCMenu...

Answer 1

I had forgotton to import MDCMenuSurface. The full, running code is:

import {MDCMenu} from '@material/menu';
import {MDCTopAppBar} from '@material/top-app-bar';
import {MDCMenuSurface} from '@material/menu-surface';

// Instantiation
const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new MDCTopAppBar(topAppBarElement);

const menu = new MDCMenu(document.querySelector('.mdc-menu'));

function openMenu() {
   menu.open = !menu.open;

}

document.querySelector('#menu-button').addEventListener("click", openMenu);