From b7af3267657f0c9d4f11d9ffbfe44c4e891abc94 Mon Sep 17 00:00:00 2001
From: StevenJoeZhang <1119186082@qq.com>
Date: Fri, 15 Feb 2019 14:45:22 +0800
Subject: [PATCH 1/3] fix #606

---
 layout/_macro/sidebar.swig                    |  4 +---
 .../components/sidebar/sidebar-dimmer.styl    | 20 +++++++++----------
 .../_common/components/sidebar/sidebar.styl   |  2 +-
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/layout/_macro/sidebar.swig b/layout/_macro/sidebar.swig
index 073744e5ba..814488d497 100644
--- a/layout/_macro/sidebar.swig
+++ b/layout/_macro/sidebar.swig
@@ -8,9 +8,6 @@
   </div>
 
   <aside id="sidebar" class="sidebar">
-    {% if theme.sidebar.onmobile %}
-      <div id="sidebar-dimmer"></div>
-    {% endif %}
     <div class="sidebar-inner">
 
       {% set display_toc = is_post and theme.toc.enable or is_page and theme.toc.enable %}
@@ -186,4 +183,5 @@
 
     </div>
   </aside>
+  <div id="sidebar-dimmer"></div>
 {% endmacro %}
diff --git a/source/css/_common/components/sidebar/sidebar-dimmer.styl b/source/css/_common/components/sidebar/sidebar-dimmer.styl
index b2da3cec2d..ebe02036fe 100644
--- a/source/css/_common/components/sidebar/sidebar-dimmer.styl
+++ b/source/css/_common/components/sidebar/sidebar-dimmer.styl
@@ -1,21 +1,19 @@
-.sidebar-active #sidebar-dimmer {
-  opacity: .7;
-  -webkit-transform: translateX(-150%);
-  transform: translateX(-150%);
+.sidebar-active + #sidebar-dimmer {
+  +mobile() {
+    opacity: .7;
+  }
+  transform: translateX(-100%);
   transition: opacity .2s;
 }
 
 #sidebar-dimmer {
-  display: none;
-  position: absolute;
+  display: block;
+  position: fixed;
   top: 0;
   left: 100%;
-  width: 200%;
+  width: 100%;
   height: 100%;
   background: #000;
   opacity: 0;
-  transition: opacity .2s,transform 0s .2s;
-  +mobile() {
-    display: block;
-  }
+  transition: opacity .2s, transform 0s .2s;
 }
diff --git a/source/css/_common/components/sidebar/sidebar.styl b/source/css/_common/components/sidebar/sidebar.styl
index ca4cbb7f84..5c1afd1b09 100644
--- a/source/css/_common/components/sidebar/sidebar.styl
+++ b/source/css/_common/components/sidebar/sidebar.styl
@@ -62,4 +62,4 @@
 @import "sidebar-blogroll";
 @import "sidebar-nav";
 @import "sidebar-toc";
-@import "sidebar-dimmer" if hexo-config('sidebar.onmobile');
+@import "sidebar-dimmer";

From 0b36dbd985645ddb7632cf30eb346837c7b44eac Mon Sep 17 00:00:00 2001
From: StevenJoeZhang <1119186082@qq.com>
Date: Thu, 21 Feb 2019 14:52:33 +0800
Subject: [PATCH 2/3] update stylesheet

---
 source/css/_common/components/sidebar/sidebar-dimmer.styl | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/source/css/_common/components/sidebar/sidebar-dimmer.styl b/source/css/_common/components/sidebar/sidebar-dimmer.styl
index ebe02036fe..b231fe8e05 100644
--- a/source/css/_common/components/sidebar/sidebar-dimmer.styl
+++ b/source/css/_common/components/sidebar/sidebar-dimmer.styl
@@ -1,9 +1,9 @@
 .sidebar-active + #sidebar-dimmer {
   +mobile() {
     opacity: .7;
+    transition: opacity .5s;
   }
   transform: translateX(-100%);
-  transition: opacity .2s;
 }
 
 #sidebar-dimmer {
@@ -15,5 +15,4 @@
   height: 100%;
   background: #000;
   opacity: 0;
-  transition: opacity .2s, transform 0s .2s;
 }

From 15cb2687c24b9d06bf7ea7e58edf8d51b87a0ba7 Mon Sep 17 00:00:00 2001
From: StevenJoeZhang <1119186082@qq.com>
Date: Sat, 23 Feb 2019 14:16:10 +0800
Subject: [PATCH 3/3] add sidebar.dimmer option

---
 _config.yml                                        | 5 +++--
 layout/_macro/sidebar.swig                         | 4 +++-
 source/css/_common/components/sidebar/sidebar.styl | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/_config.yml b/_config.yml
index e6c844a068..67ebad1353 100644
--- a/_config.yml
+++ b/_config.yml
@@ -235,8 +235,7 @@ sidebar:
   position: left
   #position: right
 
-  # Manual define the sidebar width.
-  # If commented, will be default for:
+  # Manual define the sidebar width. If commented, will be default for:
   # Muse | Mist: 320
   # Pisces | Gemini: 240
   #width: 300
@@ -259,6 +258,8 @@ sidebar:
   scrollpercent: false
   # Enable sidebar on narrow view (only for Muse | Mist).
   onmobile: false
+  # Click any blank part of the page to close sidebar (only for Muse | Mist).
+  dimmer: false
 
 
 # ---------------------------------------------------------------
diff --git a/layout/_macro/sidebar.swig b/layout/_macro/sidebar.swig
index 814488d497..6474ce865c 100644
--- a/layout/_macro/sidebar.swig
+++ b/layout/_macro/sidebar.swig
@@ -183,5 +183,7 @@
 
     </div>
   </aside>
-  <div id="sidebar-dimmer"></div>
+  {% if theme.sidebar.dimmer %}
+    <div id="sidebar-dimmer"></div>
+  {% endif %}
 {% endmacro %}
diff --git a/source/css/_common/components/sidebar/sidebar.styl b/source/css/_common/components/sidebar/sidebar.styl
index 5c1afd1b09..3aca0ae7b8 100644
--- a/source/css/_common/components/sidebar/sidebar.styl
+++ b/source/css/_common/components/sidebar/sidebar.styl
@@ -62,4 +62,4 @@
 @import "sidebar-blogroll";
 @import "sidebar-nav";
 @import "sidebar-toc";
-@import "sidebar-dimmer";
+@import "sidebar-dimmer" if hexo-config('sidebar.dimmer');