Feature: Close sidebar when click any blank part (theme-next#607)

* Fix theme-next#606

* Add sidebar.dimmer option

_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
 
 
 # ---------------------------------------------------------------

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,7 @@
 
     </div>
   </aside>
+  {% if theme.sidebar.dimmer %}
+    <div id="sidebar-dimmer"></div>
+  {% endif %}
 {% endmacro %}

source/css/_common/components/sidebar/sidebar-dimmer.styl

@@ -1,21 +1,18 @@
-.sidebar-active #sidebar-dimmer {
-  opacity: .7;
-  -webkit-transform: translateX(-150%);
-  transform: translateX(-150%);
-  transition: opacity .2s;
+.sidebar-active + #sidebar-dimmer {
+  +mobile() {
+    opacity: .7;
+    transition: opacity .5s;
+  }
+  transform: translateX(-100%);
 }
 
 #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;
-  }
 }

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" if hexo-config('sidebar.dimmer');