From 013aa1cb8c5fde24c1e6cbf0f28cb1896822efe5 Mon Sep 17 00:00:00 2001
From: Michael Rose <est.michael@gmail.com>
Date: Mon, 9 Mar 2020 14:49:15 -0400
Subject: [PATCH] Add "click" overlay to close masthead and follow button menus
 when open

Fixes #1168
---
 _sass/minimal-mistakes/_masthead.scss  |  2 +-
 _sass/minimal-mistakes/_sidebar.scss   | 40 ++++++++++++++++++++------
 _sass/minimal-mistakes/_utilities.scss | 27 +++++++++++++++++
 3 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/_sass/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/_masthead.scss
index 4c5eb15..2dfefcc 100644
--- a/_sass/minimal-mistakes/_masthead.scss
+++ b/_sass/minimal-mistakes/_masthead.scss
@@ -50,7 +50,7 @@
   -ms-flex-item-align: center;
   align-self: center;
   font-weight: bold;
-  z-index: 20;
+  // z-index: 20;
 }
 
 .site-subtitle {
diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss
index f7fc72d..43fd98e 100644
--- a/_sass/minimal-mistakes/_sidebar.scss
+++ b/_sass/minimal-mistakes/_sidebar.scss
@@ -8,13 +8,13 @@
 
 .sidebar {
   @include clearfix();
-  @include breakpoint(max-width $large) {
-    /* fix z-index order of follow links */
-    position: relative;
-    z-index: 10;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
+  // @include breakpoint(max-width $large) {
+  //   /* fix z-index order of follow links */
+  //   position: relative;
+  //   z-index: 10;
+  //   -webkit-transform: translate3d(0, 0, 0);
+  //   transform: translate3d(0, 0, 0);
+  // }
 
   @include breakpoint($large) {
     float: left;
@@ -63,7 +63,7 @@
 
   img {
     width: 100%;
-    
+
     &.emoji {
       width: 20px;
       height: 20px;
@@ -199,8 +199,27 @@
   }
 
   button {
+    position: relative;
     margin-bottom: 0;
 
+    &:before {
+      @supports (pointer-events: none) {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+      }
+    }
+
+    &.open {
+      &:before {
+        pointer-events: auto;
+      }
+    }
+
     @include breakpoint($large) {
       display: none;
     }
@@ -269,6 +288,11 @@
     }
   }
 
+  ul {
+    padding: 10px;
+    list-style-type: none;
+  }
+
   li {
     white-space: nowrap;
   }
diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss
index ec602a9..1c127d3 100644
--- a/_sass/minimal-mistakes/_utilities.scss
+++ b/_sass/minimal-mistakes/_utilities.scss
@@ -385,6 +385,33 @@ body:hover .visually-hidden button {
   }
 }
 
+.greedy-nav__toggle {
+  &:before {
+    @supports (pointer-events: none) {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      background-color: $background-color;
+      -webkit-transition: $global-transition;
+      transition: $global-transition;
+      pointer-events: none;
+    }
+  }
+
+  &.close {
+    &:before {
+      opacity: 0.9;
+      -webkit-transition: $global-transition;
+      transition: $global-transition;
+      pointer-events: auto;
+    }
+  }
+}
+
 .greedy-nav__toggle:hover {
   .navicon,
   .navicon:before,
-- 
2.43.0