feat: new option hideSidebar (#1026)

* feat: new option hideSidebar

* chore: removed the console logs

* chore: linting fixes

* chore: test fix

cypress/integration/sidebar/config.spec.js

@@ -1,29 +1,29 @@
 context('sidebar.configurations', () => {
   beforeEach(() => {
-    cy.visit('http://localhost:3000')
+    cy.visit('http://localhost:3000');
-  })
+  });
 
   const quickStartIds = [
     'initialize',
     'writing-content',
     'preview-your-site',
     'manual-initialization',
-    'loading-dialog'
+    'loading-dialog',
-  ]
+  ];
   quickStartIds.forEach(id => {
     it('go to #quickstart?id=' + id, () => {
       cy.get(
         '.sidebar-nav > :nth-child(1) > :nth-child(1) > ul > :nth-child(1) > a'
-      ).click()
+      ).click();
 
       cy.get(`a.section-link[href='#/quickstart?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
   const configurationIds = [
     'el',
@@ -31,6 +31,7 @@ context('sidebar.configurations', () => {
     'maxlevel',
     'loadnavbar',
     'loadsidebar',
+    'hidesidebar',
     'submaxlevel',
     'auto2top',
     'homepage',
@@ -57,92 +58,92 @@ context('sidebar.configurations', () => {
     'requestheaders',
     'ext',
     'fallbacklanguages',
-    'notfoundpage'
+    'notfoundpage',
-  ]
+  ];
   configurationIds.forEach(id => {
     it('go to #configuration?id=' + id, () => {
-      cy.get('[href="#/configuration"]').click()
+      cy.get('[href="#/configuration"]').click();
 
       cy.get(`a.section-link[href='#/configuration?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500) // its more far from the cover
+          cy.wait(500); // its more far from the cover
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
   const morePagesIds = [
     'sidebar',
     'nested-sidebars',
     'set-page-titles-from-sidebar-selection',
     'table-of-contents',
-    'ignoring-subheaders'
+    'ignoring-subheaders',
-  ]
+  ];
   morePagesIds.forEach(id => {
     it('go to #more-pages?id=' + id, () => {
-      cy.get('[href="#/more-pages"]').click()
+      cy.get('[href="#/more-pages"]').click();
 
       cy.get(`a.section-link[href='#/more-pages?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
   const customNavbarIds = [
     'html',
     'markdown',
     'nesting',
-    'combining-custom-navbars-with-the-emoji-plugin'
+    'combining-custom-navbars-with-the-emoji-plugin',
-  ]
+  ];
   customNavbarIds.forEach(id => {
     it('go to #custom-navbar?id=' + id, () => {
-      cy.get('[href="#/custom-navbar"]').click()
+      cy.get('[href="#/custom-navbar"]').click();
 
       cy.get(`a.section-link[href='#/custom-navbar?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
   const coverIds = [
     'basic-usage',
     'custom-background',
     'coverpage-as-homepage',
-    'multiple-covers'
+    'multiple-covers',
-  ]
+  ];
   coverIds.forEach(id => {
     it('go to #cover?id=' + id, () => {
-      cy.get('[href="#/cover"]').click()
+      cy.get('[href="#/cover"]').click();
 
       cy.get(`a.section-link[href='#/cover?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
-  const themesIds = ['other-themes']
+  const themesIds = ['other-themes'];
   themesIds.forEach(id => {
     it('go to #themes?id=' + id, () => {
-      cy.get('[href="#/themes"]').click()
+      cy.get('[href="#/themes"]').click();
 
       cy.get(`a.section-link[href='#/themes?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
   const pluginsIds = [
     'full-text-search',
@@ -158,57 +159,57 @@ context('sidebar.configurations', () => {
     'pagination',
     'codefund',
     'tabs',
-    'more-plugins'
+    'more-plugins',
-  ]
+  ];
   pluginsIds.forEach(id => {
     it('go to #plugins?id=' + id, () => {
-      cy.get('[href="#/plugins"]').click()
+      cy.get('[href="#/plugins"]').click();
 
       cy.get(`a.section-link[href='#/plugins?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
-  const writeAPluginIds = ['full-configuration', 'example', 'tips']
+  const writeAPluginIds = ['full-configuration', 'example', 'tips'];
   writeAPluginIds.forEach(id => {
     it('go to #write-a-plugin?id=' + id, () => {
-      cy.get('[href="#/write-a-plugin"]').click()
+      cy.get('[href="#/write-a-plugin"]').click();
 
       cy.get(`a.section-link[href='#/write-a-plugin?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
-  const markdownIds = ['supports-mermaid']
+  const markdownIds = ['supports-mermaid'];
   markdownIds.forEach(id => {
     it('go to #markdown?id=' + id, () => {
-      cy.get('[href="#/markdown"]').click()
+      cy.get('[href="#/markdown"]').click();
 
       cy.get(`a.section-link[href='#/markdown?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
   it('go to #Language-highlight', () => {
     cy.get('a[href="#/language-highlight"]')
       .click()
       .then(() => {
-        cy.wait(500)
+        cy.wait(500);
-        cy.matchImageSnapshot()
+        cy.matchImageSnapshot();
-      })
+      });
-  })
+  });
 
   // const deployIds = [
   //   'github-pages',
@@ -240,104 +241,104 @@ context('sidebar.configurations', () => {
     'disable-link',
     'github-task-lists',
     'customise-id-for-headings',
-    'markdown-in-html-tag'
+    'markdown-in-html-tag',
-  ]
+  ];
   helpersIds.forEach(id => {
     it('go to #helpers?id=' + id, () => {
-      cy.get('[href="#/helpers"]').click()
+      cy.get('[href="#/helpers"]').click();
 
       cy.get(`a.section-link[href='#/helpers?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
-  const vueIds = ['basic-usage', 'combine-vuep-to-write-playground']
+  const vueIds = ['basic-usage', 'combine-vuep-to-write-playground'];
   vueIds.forEach(id => {
     it('go to #vue?id=' + id, () => {
-      cy.get('[href="#/vue"]').click()
+      cy.get('[href="#/vue"]').click();
 
       cy.get(`a.section-link[href='#/vue?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
   const cdnIds = [
     'latest-version',
     'specific-version',
     'compressed-file',
-    'other-cdn'
+    'other-cdn',
-  ]
+  ];
   cdnIds.forEach(id => {
     it('go to #cdn?id=' + id, () => {
-      cy.get('[href="#/cdn"]').click()
+      cy.get('[href="#/cdn"]').click();
 
       cy.get(`a.section-link[href='#/cdn?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
-  const pwaIds = ['create-serviceworker', 'register', 'enjoy-it']
+  const pwaIds = ['create-serviceworker', 'register', 'enjoy-it'];
   pwaIds.forEach(id => {
     it('go to #pwa?id=' + id, () => {
-      cy.get('[href="#/pwa"]').click()
+      cy.get('[href="#/pwa"]').click();
 
       cy.get(`a.section-link[href='#/pwa?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
 
   const ssrIds = [
     'why-ssr',
     'quick-start',
     'custom-template',
     'configuration',
-    'deploy-for-your-vps'
+    'deploy-for-your-vps',
-  ]
+  ];
 
   ssrIds.forEach(id => {
     it('go to #ssr?id=' + id, () => {
-      cy.get('[href="#/ssr"]').click()
+      cy.get('[href="#/ssr"]').click();
 
       cy.get(`a.section-link[href='#/ssr?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
   const embedFilesIds = [
     'embedded-file-type',
     'embedded-code-fragments',
     'tag-attribute',
-    'the-code-block-highlight'
+    'the-code-block-highlight',
-  ]
+  ];
   embedFilesIds.forEach(id => {
     it('go to #embed-files?id=' + id, () => {
-      cy.get('[href="#/embed-files"]').click()
+      cy.get('[href="#/embed-files"]').click();
 
       cy.get(`a.section-link[href='#/embed-files?id=${id}']`)
         .click()
         .then(() => {
-          cy.wait(500)
+          cy.wait(500);
-          cy.matchImageSnapshot()
+          cy.matchImageSnapshot();
-        })
+        });
-    })
+    });
-  })
+  });
-})
+});

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,7 +248,7 @@ Website name as it appears in the sidebar.
 
 ```js
 window.$docsify = {
-  name: 'docsify'
+  name: 'docsify',
 };
 ```
 
@@ -243,7 +256,7 @@ 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,7 +551,7 @@ Load the `_404.md` file:
 
 ```js
 window.$docsify = {
-  notFoundPage: true
+  notFoundPage: true,
 };
 ```
 
@@ -548,7 +559,7 @@ 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);