Feature: display sidebar on mobile for Pisces and Gemini, fix issue #708

_config.yml

@@ -117,16 +117,18 @@ menu_settings:
 # ---------------------------------------------------------------
 
 sidebar:
-  # Sidebar Position.
+  # Sidebar position. Available values: left | right
   position: left
-  #position: right
 
-  # Manual define the sidebar width. If commented, will be default for:
-  # Muse | Mist: 320
-  # Pisces | Gemini: 240
-  #width: 300
+  # Sidebar width.
+  # Applicable to Muse | Mist and mobile of Pisces | Gemini.
+  width_expanded: 320
+  # Applicable to desktop of Pisces | Gemini.
+  width_dual_column: 240
 
-  # Sidebar Display (only for Muse | Mist), available values:
+  # Sidebar display.
+  # Applicable to Muse | Mist and mobile of Pisces | Gemini.
+  # Available values:
   #  - post    expand on posts automatically. Default.
   #  - always  expand for all pages automatically.
   #  - hide    expand only when click on the sidebar toggle icon.

layout/_partials/widgets.njk

@@ -1,6 +1,6 @@
 {# Widgets with fixed position #}
 
-{%- if theme.sidebar.display !== 'remove' and (theme.scheme === 'Muse' or theme.scheme === 'Mist') %}
+{%- if theme.sidebar.display !== 'remove' %}
   <div class="toggle sidebar-toggle" role="button">
     <span class="toggle-line"></span>
     <span class="toggle-line"></span>

layout/_scripts/index.njk

@@ -11,6 +11,10 @@
   {{- next_js('schemes/muse.js') }}
 {%- endif %}
 
+{%- if theme.sidebar.display !== 'remove' %}
+  {{- next_js('sidebar.js') }}
+{%- endif %}
+
 {{- next_js('next-boot.js') }}
 {%- if theme.bookmark.enable %}
   {{- next_js('bookmark.js') }}

scripts/filters/minify.js

@@ -44,6 +44,10 @@ hexo.extend.filter.register('after_generate', () => {
     hexo.route.remove('js/schemes/muse.js');
   }
 
+  if (theme.sidebar.display === 'remove') {
+    hexo.route.remove('js/sidebar.js');
+  }
+
   // Third Party Scripts
   // Analytics
   if (!theme.baidu_analytics) {

source/css/_common/outline/sidebar/index.styl

@@ -1,3 +1,112 @@
++sidebar() {
+  if ($sidebar-toggle-alignment == 'right') {
+    .sidebar {
+      right: 0 - $sidebar-width-expanded;
+
+      .sidebar-active & {
+        right: 0;
+      }
+    }
+  } else {
+    .sidebar {
+      left: 0 - $sidebar-width-expanded;
+
+      .sidebar-active & {
+        left: 0;
+      }
+    }
+  }
+
+  .sidebar {
+    background: $black-deep;
+    bottom: 0;
+    if (not hexo-config('back2top.sidebar')) {
+      box-shadow: inset 0 2px 6px black;
+    }
+    max-height: 100vh;
+    overflow-y: auto;
+    position: fixed;
+    top: 0;
+    transition: all $transition-ease-out;
+    width: $sidebar-width-expanded;
+    z-index: $zindex-2;
+
+    a {
+      border-bottom-color: $black-light;
+      color: $grey-dark;
+
+      &:hover {
+        border-bottom-color: $gainsboro;
+        color: $gainsboro;
+      }
+    }
+  }
+
+  .links-of-author {
+    &:not(:first-child) {
+      margin-top: 15px;
+    }
+
+    a {
+      border-bottom-color: $black-light;
+      display: inline-block;
+      margin-bottom: 10px;
+      margin-right: 10px;
+      vertical-align: middle;
+
+      if (hexo-config('social_icons.transition')) {
+        transition: all $transition-ease;
+      }
+
+      &::before {
+        background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
+        display: inline-block;
+        margin-right: 3px;
+        transform: translateY(-2px);
+        round-icon(4px);
+      }
+    }
+  }
+
+  .links-of-blogroll-item {
+    if (hexo-config('links_settings.layout') == 'inline') {
+      display: inline-block;
+    }
+    padding: 2px 10px;
+
+    a {
+      box-sizing: border-box;
+      display: inline-block;
+      max-width: 280px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .popular-posts .popular-posts-item .popular-posts-link:hover {
+    background: none;
+  }
+
+  .sidebar-dimmer {
+    background: black;
+    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;
+    }
+  }
+}
+
 .sidebar-inner {
   color: $grey-dark;
   padding: $sidebar-padding 10px;

source/css/_common/outline/sidebar/sidebar-toggle.styl

@@ -12,10 +12,10 @@
 
 @media (any-hover: hover) {
   body:not(.sidebar-active) .sidebar-toggle:hover {
-    toggle-arrow(hexo-config('sidebar.position'));
+    toggle-arrow($sidebar-toggle-alignment);
   }
 }
 
 .sidebar-active .sidebar-toggle {
-  toggle-close(hexo-config('sidebar.position'));
+  toggle-close($sidebar-toggle-alignment);
 }

source/css/_common/scaffolding/toggles.styl

@@ -22,9 +22,9 @@
 }
 
 .toggle.toggle-arrow {
-  toggle-arrow(hexo-config('sidebar.position'));
+  toggle-arrow($sidebar-toggle-alignment);
 }
 
 .toggle.toggle-close {
-  toggle-close(hexo-config('sidebar.position'));
+  toggle-close($sidebar-toggle-alignment);
 }

source/css/_mixins.styl

@@ -52,6 +52,16 @@ desktop-largest() {
   }
 }
 
+sidebar() {
+  if (($scheme == 'Muse') or ($scheme == 'Mist')) {
+    {block}
+  } else {
+    +tablet-mobile() {
+      {block}
+    }
+  }
+}
+
 random-color($min, $max) {
   return floor(math(0, 'random') * ($max - $min + 1) + $min);
 }
@@ -124,16 +134,9 @@ main-container() {
   }
 }
 
-sidebar-toggle-alignment($reverse) {
-  $condition = hexo-config('sidebar.position') == 'right';
-  if (($scheme == 'Muse') or ($scheme == 'Mist')) {
-    $condition = $condition == $reverse;
-  }
-  return $condition ? ('left' 'right') : ('right' 'left');
-}
-
 sidebar-toggle-position($reverse) {
-  $alignment = sidebar-toggle-alignment($reverse)[0];
+  $condition = ($sidebar-toggle-alignment == 'right') == $reverse;
+  $alignment = $condition ? 'left' : 'right';
   {$alignment}: $b2t-position-right;
   +tablet-mobile() {
     {$alignment}: $b2t-position-right-mobile;

source/css/_schemes/Muse/_sidebar.styl

@@ -1,134 +1,23 @@
-if (hexo-config('sidebar.position') == 'right') {
++desktop-large() {
+  .sidebar-dimmer {
+    display: none;
+  }
+
   .sidebar-active {
-    // Note: $sidebar-desktop + $content-desktop-large should be less than desktop-large threshold
+    // Note: $sidebar-width-expanded + $content-desktop-large should be less than desktop-large threshold
     // Otherwise a horizontal scrollbar will appear
-    +desktop-large() {
-      padding-right: $sidebar-desktop;
+    if ($sidebar-toggle-alignment == 'right') {
+      padding-right: $sidebar-width-expanded;
 
       .footer-fixed {
-        right: $sidebar-desktop;
+        right: $sidebar-width-expanded;
       }
-    }
-  }
-
-  .sidebar {
-    right: 0 - $sidebar-desktop;
-
-    .sidebar-active & {
-      right: 0;
-    }
-  }
-} else {
-  .sidebar-active {
-    +desktop-large() {
-      padding-left: $sidebar-desktop;
+    } else {
+      padding-left: $sidebar-width-expanded;
 
       .footer-fixed {
-        left: $sidebar-desktop;
+        left: $sidebar-width-expanded;
       }
     }
   }
-
-  .sidebar {
-    left: 0 - $sidebar-desktop;
-
-    .sidebar-active & {
-      left: 0;
-    }
-  }
-}
-
-.sidebar {
-  background: $black-deep;
-  bottom: 0;
-  if (not hexo-config('back2top.sidebar')) {
-    box-shadow: inset 0 2px 6px black;
-  }
-  max-height: 100vh;
-  overflow-y: auto;
-  position: fixed;
-  top: 0;
-  transition: all $transition-ease-out;
-  width: $sidebar-desktop;
-  z-index: $zindex-2;
-
-  a {
-    border-bottom-color: $black-light;
-    color: $grey-dark;
-
-    &:hover {
-      border-bottom-color: $gainsboro;
-      color: $gainsboro;
-    }
-  }
-}
-
-.links-of-author {
-  &:not(:first-child) {
-    margin-top: 15px;
-  }
-
-  a {
-    border-bottom-color: $black-light;
-    display: inline-block;
-    margin-bottom: 10px;
-    margin-right: 10px;
-    vertical-align: middle;
-
-    if (hexo-config('social_icons.transition')) {
-      transition: all $transition-ease;
-    }
-
-    &::before {
-      background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
-      display: inline-block;
-      margin-right: 3px;
-      transform: translateY(-2px);
-      round-icon(4px);
-    }
-  }
-}
-
-.links-of-blogroll-item {
-  if (hexo-config('links_settings.layout') == 'inline') {
-    display: inline-block;
-  }
-  padding: 2px 10px;
-
-  a {
-    box-sizing: border-box;
-    display: inline-block;
-    max-width: 280px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.popular-posts .popular-posts-item .popular-posts-link:hover {
-  background: none;
-}
-
-.sidebar-dimmer {
-  background: black;
-  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;
-  }
-}
-
-+desktop-large() {
-  .sidebar-dimmer {
-    display: none;
-  }
 }

source/css/_schemes/Pisces/_header.styl

@@ -1,5 +1,5 @@
 .column {
-  width: $sidebar-desktop;
+  width: $sidebar-width-dual-column;
 
   +tablet-mobile() {
     width: auto;