Material Design Lite (MDL) Navigation Drawer on the right side

Question

I am using Google Material Design Lite (MDL) for web and I am unable to put the navigation drawer on the right side. The documentation has none information about how to do that. Is that even possible?

The default drawer always come from the left.

<header class="custom-header mdl-layout__header mdl-layout__header--waterfall">
    <div class="mdl-layout__drawer-button">
        <i class="material-icons">menu</i>
    </div>
    <div class="mdl-layout__header-row">
        <span class="mdl-layout-title">My App</span>
    </div>
</header>
<div class="mdl-layout__drawer">
    drawer contents...
</div>

Answer 1

There isn't really a proper way to do this, but there is a workaround.

First, we have to overwrite the position of the drawer button, then position to whole drawer such that it appears on the right. Then we have to fix the drawer animation.

Include the following style tag after your mdl-layout__header.

<header class="custom-header mdl-layout__header mdl-layout__header--waterfall">
    <div class="mdl-layout__header-row">
        <span class="mdl-layout-title">My App</span>
    </div>
</header>
<div class="mdl-layout__drawer">
    drawer contents...
</div>

<style>
    .mdl-layout__drawer-button, .mdl-layout__drawer{
        left: initial;
        right: 0;
    }

    .mdl-layout__drawer{    
        transform:translateX(250px);
    }
</style>

Answer 2

Here is the workaroud I elaborated. Hope it's helpful. Looking for you thoughts and your advice for further improvement.

https://jsfiddle.net/VamosErik88/HTHnW/651/

<style>
.mdl-layout__drawer-right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 240px;
    height: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    box-sizing: border-box;
    border-right: 1px solid #e0e0e0;
    background: #fafafa;
    -webkit-transform: translateX(250px);
    -ms-transform: translateX(250px);
    transform: translateX(250px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    color: #424242;
    overflow: visible;
    overflow-y: auto;
    z-index: 5;
}

.active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);  
}

.mdl-layout__obfuscator-right {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 4;
    visibility: hidden;
    -webkit-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.mdl-layout__drawer-right.active~.mdl-layout__obfuscator-right {
    background-color: rgba(0,0,0,.5);
    visibility: visible;
}

.mdl-layout__drawer-right>.mdl-layout-title {
    line-height: 56px;
    padding-left: 16px;
}

</style>

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
        <div class="material-icons mdl-badge" id="notif" data-badge="5">notifications</div>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
    </div>
  <div class="mdl-layout__drawer-right">
    <span class="mdl-layout-title">Notifications</span>
   </div>
  <main class="mdl-layout__content">
  </main>
  <div class="mdl-layout__obfuscator-right"></div>
</div>

<script>
$('#notif').click(function(){
 if($('.mdl-layout__drawer-right').hasClass('active')){       
    $('.mdl-layout__drawer-right').removeClass('active'); 
 }
 else{
    $('.mdl-layout__drawer-right').addClass('active'); 
 }
});

$('.mdl-layout__obfuscator-right').click(function(){
 if($('.mdl-layout__drawer-right').hasClass('active')){       
    $('.mdl-layout__drawer-right').removeClass('active'); 
 }
 else{
    $('.mdl-layout__drawer-right').addClass('active'); 
 }
});
</script>