add a rightSidebar option

Author: trusktr

cypress/integration/sidebar/config.spec.js

@@ -32,6 +32,7 @@ context('sidebar.configurations', () => {
     'loadnavbar',
     'loadsidebar',
     'hidesidebar',
+    // 'rightSidebar', // This would require updated snapshots. I think we should get playwright in first.
     'submaxlevel',
     'auto2top',
     'homepage',

docs/configuration.md

@@ -108,7 +108,7 @@ window.$docsify = {
 ## hideSidebar
 
 - Type : `Boolean`
-- Default: `true`
+- Default: `false`
 
 This option will completely hide your sidebar and wont render any content of the side even .
 
@@ -118,6 +118,13 @@ window.$docsify = {
 };
 ```
 
+## rightSidebar
+
+- Type: `Boolean|String`
+- Default: `false`
+
+If true, the sidebar will be on the right side instead of the left.
+
 ## subMaxLevel
 
 - Type: `Number`

docs/index.html

@@ -39,6 +39,8 @@
       coverpage: true,
       executeScript: true,
       loadSidebar: true,
+      rightSidebar: true, // TODO remove before merging
+      repo: 'http://foo.bar', // TODO remove before merging
       loadNavbar: true,
       mergeNavbar: true,
       maxLevel: 4,

index.html

@@ -34,6 +34,8 @@
       coverpage: true,
       executeScript: true,
       loadSidebar: true,
+      rightSidebar: true, // TODO remove before merging
+      repo: 'http://foo.bar', // TODO remove before merging
       loadNavbar: true,
       mergeNavbar: true,
       maxLevel: 4,

src/core/init/index.js

@@ -4,13 +4,18 @@ import { initRouter } from '../router';
 import { initEvent } from '../event';
 import { initFetch } from '../fetch';
 import { isFn } from '../util/core';
+import { body } from '../util/dom';
 import { initLifecycle, callHook } from './lifecycle';
 
 export function initMixin(proto) {
   proto._init = function() {
     const vm = this;
     vm.config = config(vm);
 
+    if (vm.config.rightSidebar) {
+      body.classList.add('right-sidebar');
+    }
+
     initLifecycle(vm); // Init hooks
     initPlugin(vm); // Install plugins
     callHook(vm, 'init');

src/themes/basic/_layout.styl

@@ -79,6 +79,15 @@ li input[type='checkbox']
   vertical-align middle
 
 /* navbar */
+body.right-sidebar .app-nav
+  margin 25px 0 0 60px
+  left 0
+  right unset
+
+  & > ul
+    padding-inline-start: 0;
+    padding-inline-end: 40px; // Chrome's default value.
+
 .app-nav
   margin 25px 60px 0 0
   position absolute
@@ -159,6 +168,10 @@ li input[type='checkbox']
       display block
 
 /* github corner */
+body.right-sidebar .github-corner
+  right unset
+  transform scaleX(-1)
+
 .github-corner
   border-bottom 0
   position fixed
@@ -199,6 +212,11 @@ main.hidden
     text-decoration underline
 
 /* sidebar */
+body.right-sidebar .sidebar
+  left 100%
+  border-left 1px solid rgba(0, 0, 0, 0.07)
+  border-right none
+
 .sidebar
   border-right 1px solid rgba(0, 0, 0, 0.07)
   overflow-y auto
@@ -265,6 +283,11 @@ main.hidden
     background rgba(136, 136, 136, 0.1)
 
 /* sidebar toggle */
+body.right-sidebar .sidebar-toggle
+  left unset
+  right 0
+  transform scaleX(-1) // keeps toggle button on the right
+
 .sidebar-toggle
   background-color transparent
   background-color rgba($color-bg, 0.8)
@@ -295,14 +318,18 @@ body.sticky
     position fixed
 
 /* main content */
+body.right-sidebar .content
+  right $sidebar-width
+  left 0
+
 .content
   padding-top 60px
   position absolute
   top 0
   right 0
   bottom 0
   left $sidebar-width
-  transition left 250ms ease
+  transition left 250ms ease, right 250ms ease
 
 /* markdown content found on pages */
 .markdown-section
@@ -391,16 +418,25 @@ body.sticky
 .markdown-section ul.task-list > li
   list-style-type none
 
-body.close
-  .sidebar
+body
+  &.close .sidebar
     transform translateX(- $sidebar-width)
 
-  .sidebar-toggle
+  &.right-sidebar .sidebar
+    transform translateX(- $sidebar-width)
+
+  &.close.right-sidebar .sidebar
+    transform translateX(0)
+
+  &.close .sidebar-toggle
     width auto
 
-  .content
+  $.close .content
     left 0
 
+  &.close.right-sidebar .content
+    right 0
+
 @media print
   .github-corner, .sidebar-toggle, .sidebar, .app-nav
     display none
@@ -419,6 +455,9 @@ body.close
     height auto
     overflow-x hidden
 
+  body.right-sidebar .sidebar
+    left 100%
+
   .sidebar
     left - $sidebar-width
     transition transform 250ms ease-out
@@ -438,21 +477,35 @@ body.close
     width auto
     padding 30px 30px 10px 10px
 
-  body.close
-    .sidebar
+  body
+    // Note, on mobile .close means open, because mobile starts with the sidebar
+    // closed (opposite of desktop which starts with sidebar open), and the
+    // `close` class is toggled by the toggle button.
+
+    &.close .sidebar
       transform translateX($sidebar-width)
 
-    .sidebar-toggle
-      background-color rgba($color-bg, 0.8)
-      transition 1s background-color
-      width $sidebar-width - 16px
-      padding 10px
+    &.right-sidebar .sidebar
+      transform translateX(0)
 
-    .content
-      transform translateX($sidebar-width)
+    &.close.right-sidebar .sidebar
+      transform translateX(- $sidebar-width)
 
-    .app-nav, .github-corner
-      display none
+    &.close
+      .sidebar-toggle
+        background-color rgba($color-bg, 0.8)
+        transition 1s background-color
+        width $sidebar-width - 16px
+        padding 10px
+
+      .content
+        transform translateX($sidebar-width)
+
+      &.right-sidebar .content
+        transform translateX(- $sidebar-width)
+
+      .app-nav, .github-corner
+        display none
 
   .github-corner
     &:hover .octo-arm