Material-design-lite: Implement Side Navigation v2 Component(s)

[traviskaufman]

Spec reference: https://www.google.com/design/spec/patterns/navigation-drawer.html#

• [x] Navigation Drawer
• [x] Navigation "trigger" (an element that when interacted with should trigger the nav to open, maybe this is just a data-mdl-nav-open attribute on the body or something).
• [x] navigation overlay element (possibly)
• [x] Capable of being displayed on either side of the page.

[Download]

Please make sure this element will be easily externally controllable. In the v1 implementation, it is hard for some systems that don't work like jQuery to have only an external trigger element. We need some other mechanism (javascript function we can call, or even better, css class that we can set) in addition to the trigger element.

Also see
https://github.com/tleunen/react-mdl/issues/295
https://github.com/tleunen/react-mdl/issues/333

The problem is that at least in v1, the layout and drawer components are 'intertwined' and components are linked based on component id (on the trigger element) and some 'background scripting'. Especially this background scripting is a bit annoying. It's easy to use in jQuery like environments where we load a page and then run the scripts to make the components come alive. But if we make single page apps, or sites where pages are very interactive and long-lived, it because a real pain having to register and unregister and performing all manipulation in such a way that it does not conflict with the background behavior. It would be much better if we would have a little library of scripts for e.g. ripple that we could apply ourselves.

In my ideal world, MDL would come with only a CSS file and a supporting website that explained all the markup and class names you can use and the effects they have on the user interface. I understand that some effects can only be achieved with scripting, so that's where that little library comes in, but we should strive to minimize it in my opinion.

[Garbee]

Yes, it will be 100% controlled by developers. This is an explicit goal with the whole of V2 components and their JavaScript.

---

Edit: I also just added to the list of needs to be capable to be used on either side of the screen. The ability to have a right-aligned drawer is defined in the specs somewhere (can't remember off the top) so we should have a modifier for that.

[Download]

I also just added to the list of needs to be capable to be used on either side of the screen. The ability to have a right-aligned drawer is defined in the specs somewhere (can't remember off the top) so we should have a modifier for that.

W00t W00t! That's great news! Can't wait for v2!!

[traviskaufman]

FYI first PR will omit "Persistent" navs (ones that push content around); await design guidance on how content should be pushed (reflow, simple translation, etc...)

[ansarisufiyan777]

This project could be a help to create a sticky drawer: https://github.com/ansarisufiyan777/Angular-Material-Drawer

demo

https://ansarisufiyan777.github.io/Angular-Material-Drawer/