From 95b7403782ca1511f551bcff5b3f08984ef5cd11 Mon Sep 17 00:00:00 2001
From: rubenmoya <rmoyarodriguez@gmail.com>
Date: Mon, 14 Nov 2016 10:31:26 +0100
Subject: [PATCH] fix (#943): prevent navdrawer toggle when clicking on it

---
 components/layout/NavDrawer.js | 11 +++++------
 components/layout/_mixins.scss | 10 ++++------
 components/layout/theme.scss   |  4 +++-
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/components/layout/NavDrawer.js b/components/layout/NavDrawer.js
index 05c34def..f484bc51 100644
--- a/components/layout/NavDrawer.js
+++ b/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>
   );
 };
diff --git a/components/layout/_mixins.scss b/components/layout/_mixins.scss
index 1ace8de4..e998d174 100644
--- a/components/layout/_mixins.scss
+++ b/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);
   }
 }
 
diff --git a/components/layout/theme.scss b/components/layout/theme.scss
index 17275cd1..405d5121 100644
--- a/components/layout/theme.scss
+++ b/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;