Material-design-lite: MDL Two Drawers (Left & Right) Layout

[VamosErik88]

I'm working on a project and really needed a layout with two drawers (left as usual for Menu; right for showing Notifications).
Since this option was not available with the default MDL Layouts components I decided to create one by my self.

Here is the result on jsFiddle: https://jsfiddle.net/VamosErik88/HTHnW/651/

Looking for you thoughts and your advice for further improvement.

[Garbee]

This is against the Material Design spec which is why it won't be included in core.

[yashydv21]

To Use this code you have to insert jquery path in your html file like this http://code.jquery.com/jquery-2.2.1.min.js..

[VamosErik88]

Yes man, jQuery is required for the script to work ;)

[heukirne]

@Garbee , there's an example of this use in Rich Media Gallery filter option, that is a Google Material Design Showcase.
http://richmediagallery.com/tools/template-database

Is it against MD spec, also?

[tleunen]

From https://www.google.com/design/spec/layout/structure.html#structure-side-nav

Side navs can be positioned on the left or right side of the screen.
The content appearing in the left nav is ideally navigation- or identity-based. Right nav content should be secondary to the main content on a page.

Here's what should look like a right "nav" on desktop:

[heukirne]

Thanks @tleunen , and there is any docs on how to do that in mdl?

[VamosErik88]

@heukirne You can try with the code I provided on the fiddle link.
Nevertheless, I made also some improvements to all the code to keep it up-to-date with the latest MDL updates.
If you want I can pass the updated code to you and everyone interested.

[heukirne]

@VamosErik88 , I'll be glad to have the updated code.
I already saw your fiddle, but I'm wondering if there's other way to do that only with MDL, without jQuery.
But in Rich Media Gallery they used polymer elements, so I doubt MDL can handle rigth side nav, as material design spec.

[VamosErik88]

@heukirne I'll post you an updated fiddle link ASAP ;)
As for integrating it in MDL (without requiring jQuery), we may give a look at it together with the MDL guys here(@Garbee) , if they are interested in including it in the main branch. After all it requires just a few lines of css and script.
Let me know ;)

[heukirne]

Thanks, @VamosErik88
An alternative: https://github.com/athamid/google-material-design-lite-menu-rtl

[VamosErik88]

@heukirne Here's the link!
https://jsfiddle.net/VamosErik88/ch8bed9q/

[Garbee]

It won't be done for 1.x. But in 2.x with abstracting the drawer into its own component this will be possible.

Thanks for pointing out the specification update. Re-opening for 2.x.

[heukirne]

Great news, @Garbee
Thanks for the code @VamosErik88

[VamosErik88]

Great to hear @Garbee ! Let me know if I can be of help ;)
Glad to help @heukirne .

[Hamed-Zamanyad]

Dear @VamosErik88
Can you give a full text of html code?
Thanks

[VamosErik88]

@Hamed-Zamanyad what do you exactly mean with "full text" ? You can find everything you need to start in the fiddle (https://jsfiddle.net/VamosErik88/ch8bed9q/). Do you need something in particular?
Glad to help you ;)

[Hamed-Zamanyad]

@VamosErik88 becouse I am new in html, I can't write full of html code but it solved with copy of source code from http://view-source:http://fiddle.jshell.net/VamosErik88/HTHnW/651/show/
Thanks for your attention

[VamosErik88]

@Hamed-Zamanyad You're welcome man. You may also copy it straightly form the fiddle as you have: HTML at top-left; CSS at top-right; JS at bottom left. ;)
I'll be happy to help to for anything going forward.

[Hamed-Zamanyad]

@VamosErik88 Thank you
I want to change main drawer to right side of page because my web application language is
Persian.
Do you have any suggestion?
I can't make a link list in right drawer , like left drawer

[VamosErik88]

@Hamed-Zamanyad Alright now I got it.
My solution is more appropriate for having two drawers work at the same time. Using one for the main navigation and the other for listing other content (notifications in my specific case).
In your case I think it would be more simple to use the alternative suggested by @heukirne ( link here: https://github.com/athamid/google-material-design-lite-menu-rtl). It simply translates the main navigation drawer from left to right and is specifically designed for RTL languages. So I think it is definitely what you're looking for.
Let me know how it goes ;)

[Hamed-Zamanyad]

@VamosErik88 Thanks again.
Would you help me how could I use those files. I don't know any thing about that.

[VamosErik88]

Well, I didn't use that specific solution. However I suppose you have to download the zip of the repository and unpack it. There you'll find an *.html file of example which you can use as base to start working and adding your own stuff.

[Hamed-Zamanyad]

@VamosErik88 Fortunately this link ( link here: https://github.com/athamid/google-material-design-lite-menu-rtl) files writer is my citizen and he try to help me.
Thank you

[Garbee]

This issue is superseded by #4476.

[awebexpert]

Thank you guys! Respect your work a lot, thank you @Garbee for such a wonderful work. And thank you @VamosErik88 for bringing such a useful feature. I've heard 2017-2018 would bring something new from Google, can't wait to see what direction things will take, but for now MDL is... above (and beyond:)