diff --git a/docs/configuration.md b/docs/configuration.md index 7b61752984..4df744557b 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -770,6 +770,19 @@ window.$docsify = { }; ``` +## rightSidebar + +- Type : `Boolean` +- Default: `false` + +Position the sidebar on the right side of the page instead of the left. + +```js +window.$docsify = { + rightSidebar: true, +}; +``` + ## routerMode Configure the URL format that the paths of your site will use. diff --git a/src/core/config.js b/src/core/config.js index b2e2fdb9e2..812247c164 100644 --- a/src/core/config.js +++ b/src/core/config.js @@ -53,6 +53,7 @@ const defaultDocsifyConfig = () => ({ relativePath: false, repo: /** @type {string} */ (''), requestHeaders: /** @type {Record} */ ({}), + rightSidebar: false, routerMode: /** @type {'hash' | 'history'} */ 'hash', routes: /** @type {Record} */ ({}), skipLink: /** @type {false | string | Record} */ ( diff --git a/src/core/render/index.js b/src/core/render/index.js index f4db193754..19cc0a5800 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -561,6 +561,9 @@ export function Render(Base) { initRender() { const config = this.config; + // Position the sidebar on the right instead of the left + dom.body.classList.toggle('right-sidebar', !!config.rightSidebar); + // Init markdown compiler this.compiler = new Compiler(config, this.router); window.__current_docsify_compiler__ = this.compiler; diff --git a/src/themes/shared/_sidebar.css b/src/themes/shared/_sidebar.css index 13e29f2543..00e8eee5ff 100644 --- a/src/themes/shared/_sidebar.css +++ b/src/themes/shared/_sidebar.css @@ -246,6 +246,41 @@ } } +/* Right Sidebar */ +/* ========================================================================== */ +body.right-sidebar { + .sidebar { + left: auto; + right: 0; + translate: var(--sidebar-width); + border-right: 0; + border-left: 1px solid var(--sidebar-border-color); + } + + .sidebar-toggle { + left: auto; + right: 0; + } + + .sidebar-toggle-button { + border-radius: var(--border-radius) 0 0 var(--border-radius); + } + + &:has(.sidebar.show) { + main > .content { + right: var(--sidebar-width); + } + + .app-nav { + right: var(--sidebar-width); + } + + .sidebar-toggle { + translate: calc(0px - var(--sidebar-width)); + } + } +} + .sidebar-toggle-button { display: flex; flex-direction: column; diff --git a/test/integration/sidebar.test.js b/test/integration/sidebar.test.js index 1ee61f7868..5e4694d14d 100644 --- a/test/integration/sidebar.test.js +++ b/test/integration/sidebar.test.js @@ -143,3 +143,30 @@ describe('Test sidebar render toc structure', function () { expect(sidebarText).not.toContain('Quoted Title Without Space'); }); }); + +describe('Configuration: rightSidebar', () => { + test('rightSidebar=true adds the right-sidebar class to ', async () => { + await docsifyInit({ + config: { + rightSidebar: true, + }, + markdown: { + homepage: '# Hello World', + }, + waitForSelector: '.sidebar', + }); + + expect(document.body.classList.contains('right-sidebar')).toBe(true); + }); + + test('rightSidebar=false (default) does not add the right-sidebar class', async () => { + await docsifyInit({ + markdown: { + homepage: '# Hello World', + }, + waitForSelector: '.sidebar', + }); + + expect(document.body.classList.contains('right-sidebar')).toBe(false); + }); +});