adjust styles for preview

src/client/js/services/NavigationContainer.js

@@ -109,6 +109,7 @@ export default class NavigationContainer extends Container {
       $('body').removeClass('on-edit');
       $('body').removeClass('builtin-editor');
       $('body').removeClass('hackmd');
+      $('body').removeClass('pathname-sidebar');
       window.history.replaceState(null, '', window.location.pathname);
     }
 
@@ -116,6 +117,10 @@ export default class NavigationContainer extends Container {
       $('body').addClass('on-edit');
       $('body').addClass('builtin-editor');
       $('body').removeClass('hackmd');
+      // editing /Sidebar
+      if (window.location.pathname === '/Sidebar') {
+        $('body').addClass('pathname-sidebar');
+      }
       window.location.hash = '#edit';
     }
 
@@ -123,8 +128,8 @@ export default class NavigationContainer extends Container {
       $('body').addClass('on-edit');
       $('body').addClass('hackmd');
       $('body').removeClass('builtin-editor');
+      $('body').removeClass('pathname-sidebar');
       window.location.hash = '#hackmd';
-
     }
 
     this.updateDrawerMode({ ...this.state, editorMode }); // generate newest state object

src/client/styles/scss/_on-edit.scss

@@ -256,6 +256,20 @@ body.on-edit {
 
   // .builtin-editor .tab-pane#edit
 
+  // editing /Sidebar
+  &.pathname-sidebar {
+    .page-editor-preview-body {
+      width: 320px;
+      padding-top: 0;
+      margin-right: auto;
+      margin-left: auto;
+
+      .wiki {
+        @extend %grw-custom-sidebar-content;
+      }
+    }
+  }
+
   &.hackmd {
     .hackmd-preinit,
     #iframe-hackmd-container > iframe {

src/client/styles/scss/theme/_apply-colors.scss

@@ -439,6 +439,16 @@ body.on-edit {
   }
 }
 
+/*
+ * Preview for editing /Sidebar
+ */
+body.pathname-sidebar {
+  .page-editor-preview-body {
+    color: $color-sidebar-context;
+    background-color: $bgcolor-sidebar-context;
+  }
+}
+
 /*
  * GROWI Grid Edit Modal
  */