Refactored overlay into own component

src/js/left-nav.jsx

@@ -2,6 +2,7 @@ var React = require('react'),
   KeyCode = require('./utils/key-code.js'),
   Classable = require('./mixins/classable.js'),
   WindowListenable = require('./mixins/window-listenable.js'),
+  Overlay = require('./overlay.jsx'),
   Paper = require('./paper.jsx'),
   Menu = require('./menu.jsx');
 
@@ -50,11 +51,7 @@ var LeftNav = React.createClass({
       selectedIndex = this.props.selectedIndex,
       overlay;
 
-    if (!this.props.docked) {
-      overlay = (
-        <div className="mui-overlay" onTouchTap={this._onOverlayTouchTap} />
-      );
-    }
+    if (!this.props.docked) overlay = <Overlay show={this.state.open} onTouchTap={this._onOverlayTouchTap} />;
 
     return (
       <div className={classes}>

src/js/overlay.jsx

@@ -0,0 +1,29 @@
+var React = require('react'),
+  Classable = require('./mixins/classable.js');
+
+var Overlay = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    show: React.PropTypes.bool
+  },
+
+  render: function() {
+    var 
+      {
+        className,
+        ...other
+      } = this.props,
+      classes = this.getClasses('mui-overlay', {
+        'mui-is-shown': this.props.show
+      });
+
+    return (
+      <div {...other} className={classes} />
+    );
+  }
+
+});
+
+module.exports = Overlay;

src/less/components/components.less

@@ -12,6 +12,7 @@
 @import "input.less";
 @import "left-nav.less";
 @import "menu.less";
+@import "overlay.less";
 @import "paper.less";
 @import "paper-button.less";
 @import "radio-button.less";

src/less/components/left-nav.less

@@ -1,17 +1,5 @@
 .mui-left-nav {
 
-  .mui-overlay {
-    position: fixed;
-    height: 100%;
-    width: 100%;
-    z-index: 9;
-
-    background-color: @light-black;
-    left: 0px;
-    top: 0px;
-    .lh-transition(left 0ms @ease-out-function 0ms, background-color 400ms @ease-out-function 0ms);
-  }
-
   .mui-left-nav-menu {
     height: 100%;
     position: fixed;
@@ -36,17 +24,8 @@
   }
 
   &.mui-closed {
-
-    .mui-overlay {
-      left: -100%;
-      background-color: rgba(0, 0, 0, 0);
-
-      .lh-transition(left 0ms @ease-out-function 400ms, background-color 400ms @ease-out-function 0ms);
-    }
-
     .mui-left-nav-menu {
       .lh-translate3d((-1 * @left-nav-width) - 10px, 0, 0);
     }
-
   }
-}
+}

src/less/components/overlay.less

@@ -0,0 +1,17 @@
+.mui-overlay {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  z-index: 9;
+  top: 0px;
+
+  left: -100%;
+  background-color: rgba(0, 0, 0, 0);
+  .lh-transition(left 0ms @ease-out-function 400ms, background-color 400ms @ease-out-function 0ms);
+
+  &.mui-is-shown {
+    left: 0px;
+    background-color: @light-black;
+    .lh-transition(left 0ms @ease-out-function 0ms, background-color 400ms @ease-out-function 0ms);
+  }
+}