Use Overlay component in drawers

components/drawer/index.jsx

@@ -1,18 +1,20 @@
 import React from 'react';
+import Overlay from '../overlay';
 import style from './style';
 
 const Drawer = (props) => {
-  let className = `${style.drawer} ${style[props.type]}`;
+  let className = `${style.root} ${style[props.type]}`;
   if (props.active) className += ` ${style.active}`;
   if (props.className) className += ` ${props.className}`;
 
   return (
-    <div data-react-toolbox='drawer' className={className}>
-      <div className={style.overlay} onClick={props.onOverlayClick}></div>
-      <aside className={style.content}>
-        { props.children }
-      </aside>
-    </div>
+    <Overlay active={props.active} onClick={props.onOverlayClick}>
+      <div data-react-toolbox='drawer' className={className}>
+        <aside className={style.content}>
+          { props.children }
+        </aside>
+      </div>
+    </Overlay>
   );
 };
 

components/drawer/style.scss

@@ -1,59 +1,7 @@
 @import "../base";
 @import "./config";
 
-.drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: $z-index-high;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none;
-}
-
-.active {
-  pointer-events: all;
-  > .content {
-    transition-delay: $animation-delay;
-    transform: translateX(0);
-  }
-  > .overlay {
-    opacity: $color-overlay-opacity;
-  }
-}
-
-.left {
-  > .content {
-    left: 0;
-    border-right: 1px solid $drawer-border-color;
-  }
-  &:not(.active) > .content {
-    transform: translateX(- 100%);
-  }
-}
-
-.right {
-  > .content {
-    right: 0;
-    border-left: 1px solid $drawer-border-color;
-  }
-  &:not(.active) > .content {
-    transform: translateX(100%);
-  }
-}
-
-.overlay {
-  width: 100%;
-  height: 100%;
-  background-color: $drawer-overlay-color;
-  opacity: 0;
-  transition-timing-function: $animation-curve-default;
-  transition-duration: $animation-duration;
-  transition-property: opacity;
-}
-
-.content {
+.root {
   @include shadow-2dp();
   position: absolute;
   top: 0;
@@ -62,6 +10,7 @@
   height: 100%;
   overflow-y: scroll;
   color: $drawer-text-color;
+  pointer-events: none;
   background-color: $drawer-background-color;
   transition-delay: 0s;
   transition-timing-function: $animation-curve-default;
@@ -69,4 +18,23 @@
   transition-property: transform;
   transform-style: preserve-3d;
   will-change: transform;
+  &.active {
+    pointer-events: all;
+    transition-delay: $animation-delay;
+    transform: translateX(0);
+  }
+  &.right {
+    right: 0;
+    border-left: 1px solid $drawer-border-color;
+    &:not(.active) {
+      transform: translateX(100%);
+    }
+  }
+  &.left {
+    left: 0;
+    border-right: 1px solid $drawer-border-color;
+    &:not(.active) {
+      transform: translateX(- 100%);
+    }
+  }
 }