amorey/gist:283a4236a1b2e0b29d50

## gistfile1.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- load MUI -->
    <link href="//cdn.muicss.com/mui-0.1.2/css/mui.min.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.muicss.com/mui-0.1.2/js/mui.min.js"></script>
    <!-- Sidenav CSS -->
    <style>
      #sidenav {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 200px;
        background-color: #fff;

        left: -200px;
        transition: left ease-in-out 0.2s;
      }

      #sidenav.sidenav-show {
        left: 0;
      }
    </style>
    <!-- Sidenav JS -->
    <script>
      window.addEventListener('DOMContentLoaded', function() {
        // detach sidenav from document
        sidenavEl = document.getElementById('sidenav');
        sidenavEl.parentNode.removeChild(sidenavEl);

        function showSidenav() {
          // turn on overlay
          mui.overlay('on', sidenavEl, {
            onclose: function() {sidenavEl.className = '';}
          });

          // animate sidenav
          setTimeout(function() {
            sidenavEl.className = 'sidenav-show';
          }, 0);
        }

        // instrument toggle element
        var toggleEl = document.getElementById('sidenav-toggle');
        toggleEl.addEventListener('click', showSidenav);
      });
    </script>
  </head>
  <body>
    <nav id="sidenav">
      Sidenav Content
    </nav>
    <a id="sidenav-toggle" class="mui-btn mui-btn-primary">Show sidenav</a>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- load MUI -->
	<link href="//cdn.muicss.com/mui-0.1.2/css/mui.min.css" rel="stylesheet" type="text/css" />
	<script src="//cdn.muicss.com/mui-0.1.2/js/mui.min.js"></script>
	<!-- Sidenav CSS -->
	<style>
	#sidenav {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 200px;
	background-color: #fff;

	left: -200px;
	transition: left ease-in-out 0.2s;
	}

	#sidenav.sidenav-show {
	left: 0;
	}
	</style>
	<!-- Sidenav JS -->
	<script>
	window.addEventListener('DOMContentLoaded', function() {
	// detach sidenav from document
	sidenavEl = document.getElementById('sidenav');
	sidenavEl.parentNode.removeChild(sidenavEl);

	function showSidenav() {
	// turn on overlay
	mui.overlay('on', sidenavEl, {
	onclose: function() {sidenavEl.className = '';}
	});

	// animate sidenav
	setTimeout(function() {
	sidenavEl.className = 'sidenav-show';
	}, 0);
	}

	// instrument toggle element
	var toggleEl = document.getElementById('sidenav-toggle');
	toggleEl.addEventListener('click', showSidenav);
	});
	</script>
	</head>
	<body>
	<nav id="sidenav">
	Sidenav Content
	</nav>
	<a id="sidenav-toggle" class="mui-btn mui-btn-primary">Show sidenav</a>
	</body>
	</html>