Refactor sidebar-toggle, sidebar-dimmer & back-to-top

next-theme · Nov 9, 2022 · c7b92c3 · c7b92c3
1 parent 0c35aeb
commit c7b92c3
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 38 deletions.
diff --git a/layout/_layout.njk b/layout/_layout.njk
@@ -24,8 +24,6 @@
       {%- endif %}
     </header>
 
-    {{ partial('_partials/widgets.njk', {}, {cache: theme.cache.enable}) }}
-
     <div class="main-inner {% block class %}{% endblock %}">
       {%- include '_partials/header/sub-menu.njk' -%}
       {% block content %}{% endblock %}
@@ -40,6 +38,8 @@
     </div>
   </footer>
 
+  {{ partial('_partials/widgets.njk', {}, {cache: theme.cache.enable}) }}
+
   {{ partial('_scripts/index.njk', {}, {cache: theme.cache.enable}) }}
   {{ partial('_third-party/index.njk', {}, {cache: theme.cache.enable}) }}
   {{ partial('_third-party/statistics/index.njk', {}, {cache: theme.cache.enable}) }}

diff --git a/layout/_macro/sidebar.njk b/layout/_macro/sidebar.njk
@@ -1,10 +1,4 @@
 {% macro render(display_toc) %}
-  <div class="toggle sidebar-toggle" role="button">
-    <span class="toggle-line"></span>
-    <span class="toggle-line"></span>
-    <span class="toggle-line"></span>
-  </div>
-
   <aside class="sidebar">
     {%- set display_toc = page.toc.enable and display_toc %}
     {%- if display_toc %}
@@ -46,5 +40,4 @@
       {%- endif %}
     </div>
   </aside>
-  <div class="sidebar-dimmer"></div>
 {% endmacro %}
diff --git a/layout/_partials/widgets.njk b/layout/_partials/widgets.njk
@@ -1,3 +1,14 @@
+{# Widgets with fixed position #}
+
+{%- if theme.sidebar.display !== 'remove' and (theme.scheme === 'Muse' or theme.scheme === 'Mist') %}
+  <div class="toggle sidebar-toggle" role="button">
+    <span class="toggle-line"></span>
+    <span class="toggle-line"></span>
+    <span class="toggle-line"></span>
+  </div>
+  <div class="sidebar-dimmer"></div>
+{%- endif %}
+
 {%- if theme.back2top.enable and not theme.back2top.sidebar %}
   <div class="back-to-top" role="button" aria-label="{{ __('accessibility.back_to_top') }}">
     <i class="fa fa-arrow-up"></i>

diff --git a/source/css/_common/outline/sidebar/index.styl b/source/css/_common/outline/sidebar/index.styl
@@ -31,7 +31,6 @@
 @import 'sidebar-author-links';
 @import 'sidebar-button';
 @import 'sidebar-blogroll';
-@import 'sidebar-dimmer';
 @import 'sidebar-nav';
 @import 'sidebar-toggle';
 @import 'sidebar-toc';

diff --git a/source/css/_common/outline/sidebar/sidebar-dimmer.styl b/source/css/_common/outline/sidebar/sidebar-dimmer.styl
diff --git a/source/css/_schemes/Muse/_sidebar.styl b/source/css/_schemes/Muse/_sidebar.styl
@@ -92,3 +92,28 @@ if (hexo-config('sidebar.position') == 'right') {
     white-space: nowrap;
   }
 }
+
+.sidebar-dimmer {
+  display: none;
+}
+
++tablet-mobile() {
+  .sidebar-dimmer {
+    background: black;
+    display: block;
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    position: fixed;
+    top: 0;
+    transition: visibility .4s, opacity .4s;
+    visibility: hidden;
+    width: 100%;
+    z-index: $zindex-1;
+
+    .sidebar-active & {
+      opacity: .7;
+      visibility: visible;
+    }
+  }
+}
diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl
@@ -15,10 +15,6 @@
   }
 }
 
-.sidebar-toggle {
-  display: none;
-}
-
 .sidebar-inner {
   background: var(--content-bg-color);
   border-radius: $border-radius;