Drawer doesn't close on link click

[timfish]

Because mdl was designed with static pages in mind, the drawer does not close automatically once a link has been clicked. I managed to fix this by listening for the router:navigation:success event on the EventAggregator and toggling the drawer if its currently open:

    this.eventAggregator.subscribe('router:navigation:success', (payload) => {
      if (payload.result.completed == true) {
        var layout = document.querySelector('.mdl-layout');
        var drawer = document.querySelector('.mdl-layout__drawer')
        if (drawer.classList.contains(layout.MaterialLayout.CssClasses_.IS_DRAWER_OPEN)) {
          layout.MaterialLayout.toggleDrawer();
        }
      }
    });

[Thanood]

Thanks for mentioning this, @timfish. Although this project is practically abandoned, it's valuable information. Having said that, feel free to adopt the project if you like.

[timfish]

@Thanood It may be near abandonment but its better than many of the aurelia/mdl options out there. I'm using genadis/aurelia-mdl but the checkbox and switch don't seem to update when the backing model changes so I borrowed the components from here which are working well. They're good examples of custom components wrapping an existing library. It looks like aurelia-interface will replace all of our work here eventually...

[Thanood]

In this case it should also be considered if the drawer is fixed and if it's visible because the viewport is wide enough. Toggling the drawer when it's fixed in such a case displays an overlay as if the drawer was sliding in. Nothing else happens (which is a good thing in that case :smile:).

I thought maybe there should also be a toggle when one does not click a navigation link but f.i. an option. But thinking about it, navigation may actually be the only situation where I'd want an auto-close.

[timfish]

In my testing, I found that if the IS_DRAWER_OPEN class is only applied when the drawer has been manually opened by the menu button. That seems like the only requirement to call toggle:

drawer.classList.contains(...IS_DRAWER_OPEN) == drawer is open due to click on menu button

Without this check it also toggles the menu when aurelia navigates to the default route on initial load!

[Thanood]

You're right. I'll add this later today or if you'd like to create a PR, I'll merge it.

[Thanood]

I've incorporated this into the mdl-layout component.