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

* Fix #606 * Add sidebar.dimmer option
theme-next · Feb 23, 2019 · f4b967e · f4b967e · sli1989 · Apr 2, 2019
1 parent 716f593
commit f4b967e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 18 deletions.
diff --git 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
@@ -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 %}
diff --git a/source/css/_common/components/sidebar/sidebar-dimmer.styl b/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;
-  }
 }
diff --git 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" if hexo-config('sidebar.dimmer');