feat: new option hideSidebar (#1026)

* feat: new option hideSidebar

* chore: removed the console logs

* chore: linting fixes

* chore: test fix

docs/configuration.md

@@ -7,8 +7,8 @@ You can configure the `window.$docsify`.
   window.$docsify = {
     repo: 'docsifyjs/docsify',
     maxLevel: 3,
-    coverpage: true
-  }
+    coverpage: true,
+  };
 </script>
 ```
 
@@ -21,7 +21,7 @@ The DOM element to be mounted on initialization. It can be a CSS selector string
 
 ```js
 window.$docsify = {
-  el: '#app'
+  el: '#app',
 };
 ```
 
@@ -36,7 +36,7 @@ Configure the repository url or a string of `username/repo` can add the [GitHub
 window.$docsify = {
   repo: 'docsifyjs/docsify',
   // or
-  repo: 'https://github.com/docsifyjs/docsify/'
+  repo: 'https://github.com/docsifyjs/docsify/',
 };
 ```
 
@@ -49,7 +49,7 @@ Maximum Table of content level.
 
 ```js
 window.$docsify = {
-  maxLevel: 4
+  maxLevel: 4,
 };
 ```
 
@@ -66,7 +66,7 @@ window.$docsify = {
   loadNavbar: true,
 
   // load from nav.md
-  loadNavbar: 'nav.md'
+  loadNavbar: 'nav.md',
 };
 ```
 
@@ -83,7 +83,20 @@ window.$docsify = {
   loadSidebar: true,
 
   // load from summary.md
-  loadSidebar: 'summary.md'
+  loadSidebar: 'summary.md',
+};
+```
+
+## hideSidebar
+
+- Type : `Boolean`
+- Default: `true`
+
+This option will completely hide your sidebar and wont render any content of the side even .
+
+```js
+window.$docsify = {
+  hideSidebar: true,
 };
 ```
 
@@ -96,7 +109,7 @@ Add table of contents (TOC) in custom sidebar.
 
 ```js
 window.$docsify = {
-  subMaxLevel: 2
+  subMaxLevel: 2,
 };
 ```
 
@@ -109,7 +122,7 @@ Scrolls to the top of the screen when the route is changed.
 
 ```js
 window.$docsify = {
-  auto2top: true
+  auto2top: true,
 };
 ```
 
@@ -127,7 +140,7 @@ window.$docsify = {
 
   // Or use the readme in your repo
   homepage:
-    'https://raw.githubusercontent.com/docsifyjs/docsify/master/README.md'
+    'https://raw.githubusercontent.com/docsifyjs/docsify/master/README.md',
 };
 ```
 
@@ -146,7 +159,7 @@ window.$docsify = {
 
   // Even can load files from other repo
   basePath:
-    'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/'
+    'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/',
 };
 ```
 
@@ -186,7 +199,7 @@ window.$docsify = {
   relativePath: true,
 
   // Relative path disabled (default value)
-  relativePath: false
+  relativePath: false,
 };
 ```
 
@@ -210,8 +223,8 @@ window.$docsify = {
   // mutiple covers and custom file name
   coverpage: {
     '/': 'cover.md',
-    '/zh-cn/': 'cover.md'
-  }
+    '/zh-cn/': 'cover.md',
+  },
 };
 ```
 
@@ -223,7 +236,7 @@ Website logo as it appears in the sidebar, you can resize by CSS.
 
 ```js
 window.$docsify = {
-  logo: '/_media/icon.svg'
+  logo: '/_media/icon.svg',
 };
 ```
 
@@ -235,15 +248,15 @@ Website name as it appears in the sidebar.
 
 ```js
 window.$docsify = {
-  name: 'docsify'
+  name: 'docsify',
 };
 ```
 
 The name field can also contain custom HTML for easier customization:
 
 ```js
 window.$docsify = {
-  name: '<span>docsify</span>'
+  name: '<span>docsify</span>',
 };
 ```
 
@@ -261,8 +274,8 @@ window.$docsify = {
   // For each route
   nameLink: {
     '/zh-cn/': '/zh-cn/',
-    '/': '/'
-  }
+    '/': '/',
+  },
 };
 ```
 
@@ -280,15 +293,15 @@ window.$docsify = {
     renderer: {
       link: function() {
         // ...
-      }
-    }
+      },
+    },
   },
 
   // function
   markdown: function(marked, renderer) {
     // ...
     return marked;
-  }
+  },
 };
 ```
 
@@ -300,7 +313,7 @@ Customize the theme color. Use [CSS3 variables](https://developer.mozilla.org/en
 
 ```js
 window.$docsify = {
-  themeColor: '#3F51B5'
+  themeColor: '#3F51B5',
 };
 ```
 
@@ -317,8 +330,8 @@ window.$docsify = {
     '/zh-cn/changelog': '/changelog',
     '/changelog':
       'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG',
-    '/.*/_sidebar.md': '/_sidebar.md' // See #301
-  }
+    '/.*/_sidebar.md': '/_sidebar.md', // See #301
+  },
 };
 ```
 
@@ -331,7 +344,7 @@ If `loadSidebar` and `autoHeader` are both enabled, for each link in `_sidebar.m
 ```js
 window.$docsify = {
   loadSidebar: true,
-  autoHeader: true
+  autoHeader: true,
 };
 ```
 
@@ -343,7 +356,7 @@ Execute the script on the page. Only parse the first script tag([demo](themes)).
 
 ```js
 window.$docsify = {
-  executeScript: true
+  executeScript: true,
 };
 ```
 
@@ -365,7 +378,7 @@ Disabled emoji parse.
 
 ```js
 window.$docsify = {
-  noEmoji: true
+  noEmoji: true,
 };
 ```
 
@@ -379,7 +392,7 @@ Navbar will be merged with the sidebar on smaller screens.
 
 ```js
 window.$docsify = {
-  mergeNavbar: true
+  mergeNavbar: true,
 };
 ```
 
@@ -398,7 +411,7 @@ window.$docsify = {
     // ...
 
     return time;
-  }
+  },
 };
 ```
 
@@ -411,7 +424,7 @@ Target to open external links inside the markdown. Default `'_blank'` (new windo
 
 ```js
 window.$docsify = {
-  externalLinkTarget: '_self' // default: '_blank'
+  externalLinkTarget: '_self', // default: '_blank'
 };
 ```
 
@@ -424,7 +437,7 @@ Target to open external link at the top right corner. Default `'_blank'` (new wi
 
 ```js
 window.$docsify = {
-  cornerExternalLinkTarget: '_self' // default: '_blank'
+  cornerExternalLinkTarget: '_self', // default: '_blank'
 };
 ```
 
@@ -437,7 +450,7 @@ Default `'noopener'` (no opener) prevents the newly opened external page (when [
 
 ```js
 window.$docsify = {
-  externalLinkTarget: '' // default: 'noopener'
+  externalLinkTarget: '', // default: 'noopener'
 };
 ```
 
@@ -448,7 +461,7 @@ window.$docsify = {
 
 ```js
 window.$docsify = {
-  routerMode: 'history' // default: 'hash'
+  routerMode: 'history', // default: 'hash'
 };
 ```
 
@@ -460,7 +473,7 @@ Sometimes we do not want docsify to handle our links. See [#203](https://github.
 
 ```js
 window.$docsify = {
-  noCompileLinks: ['/foo', '/bar/.*']
+  noCompileLinks: ['/foo', '/bar/.*'],
 };
 ```
 
@@ -472,7 +485,7 @@ Only coverpage is loaded when visiting the home page.
 
 ```js
 window.$docsify = {
-  onlyCover: false
+  onlyCover: false,
 };
 ```
 
@@ -485,8 +498,8 @@ Set the request resource headers.
 ```js
 window.$docsify = {
   requestHeaders: {
-    'x-token': 'xxx'
-  }
+    'x-token': 'xxx',
+  },
 };
 ```
 
@@ -495,13 +508,11 @@ Such as setting the cache
 ```js
 window.$docsify = {
   requestHeaders: {
-    'cache-control': 'max-age=600'
-  }
+    'cache-control': 'max-age=600',
+  },
 };
 ```
 
-
-
 ## ext
 
 - type: `String`
@@ -510,7 +521,7 @@ Request file extension.
 
 ```js
 window.$docsify = {
-  ext: '.md'
+  ext: '.md',
 };
 ```
 
@@ -528,7 +539,7 @@ Example:
 
 ```js
 window.$docsify = {
-  fallbackLanguages: ['fr', 'de']
+  fallbackLanguages: ['fr', 'de'],
 };
 ```
 
@@ -540,15 +551,15 @@ Load the `_404.md` file:
 
 ```js
 window.$docsify = {
-  notFoundPage: true
+  notFoundPage: true,
 };
 ```
 
 Load the customised path of the 404 page:
 
 ```js
 window.$docsify = {
-  notFoundPage: 'my404.md'
+  notFoundPage: 'my404.md',
 };
 ```
 
@@ -558,8 +569,8 @@ Load the right 404 page according to the localisation:
 window.$docsify = {
   notFoundPage: {
     '/': '_404.md',
-    '/de': 'de/_404.md'
-  }
+    '/de': 'de/_404.md',
+  },
 };
 ```
 

src/core/render/index.js

@@ -95,7 +95,18 @@ export function renderMixin(proto) {
   };
 
   proto._renderSidebar = function(text) {
-    const { maxLevel, subMaxLevel, loadSidebar } = this.config;
+    const { maxLevel, subMaxLevel, loadSidebar, hideSidebar } = this.config;
+
+    if (hideSidebar) {
+      // FIXME : better styling solution
+      document.querySelector('aside.sidebar').remove();
+      document.querySelector('button.sidebar-toggle').remove();
+      document.querySelector('section.content').style.right = 'unset';
+      document.querySelector('section.content').style.left = 'unset';
+      document.querySelector('section.content').style.position = 'relative';
+      document.querySelector('section.content').style.width = '100%';
+      return null;
+    }
 
     this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel));
     const activeEl = getAndActive(this.router, '.sidebar-nav', true, true);