Merge branch 'dev' of github.com:soyjavi/react-toolbox into dev

* 'dev' of github.com:soyjavi/react-toolbox:
  fix (#943): prevent navdrawer toggle when clicking on it

components/layout/NavDrawer.js

@@ -16,12 +16,11 @@ const NavDrawer = ({ active, children, className, onOverlayClick, permanentAt, p
   });
 
   return (
-    <div data-react-toolbox='nav-drawer' className={rootClasses} onClick={onOverlayClick}>
-      <div data-react-toolbox='nav-drawer-scrim' className={theme.scrim}>
-        <aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
-          {children}
-        </aside>
-      </div>
+    <div data-react-toolbox='nav-drawer' className={rootClasses}>
+      <div data-react-toolbox='nav-drawer-scrim' className={theme.scrim} onClick={onOverlayClick} />
+      <aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
+        {children}
+      </aside>
     </div>
   );
 };

components/layout/_mixins.scss

@@ -1,11 +1,9 @@
 @mixin open() {
   transition-delay: $animation-delay;
-  & > .scrim {
-    & > .drawerContent {
-      pointer-events: all;
-      transition-delay: $animation-delay;
-      transform: translateX(0);
-    }
+  .drawerContent {
+    pointer-events: all;
+    transition-delay: $animation-delay;
+    transform: translateX(0);
   }
 }
 

components/layout/theme.scss

@@ -29,7 +29,7 @@
       top: 0;
       bottom: 0;
       left: 0;
-      z-index: $z-index-highest;
+      z-index: $z-index-higher;
       width: 0;
       height: 100%;
       background-color: rgba($drawer-overlay-color, 0);
@@ -38,6 +38,8 @@
 
     .drawerContent {
       @include shadow-2dp();
+      position: absolute;
+      z-index: $z-index-highest;
       display: flex;
       width: $navigation-drawer-mobile-width;
       max-width: $navigation-drawer-max-mobile-width;