option to put sidebar on the right

Feature request

An option to put the sidebar on the right instead of the left

What problem does this feature solve?

Sometimes people want it on the other side (maybe they embed Docsify somewhere that already has a sidebar on the left, or maybe they have a custom landing page with a custom menu on the right and when they click the link to go to documentation they’d also want the docs to have the sidebar on the same side).

What does the proposed API look like?

rightSidebar: true // or false

or

sidebarPosition: 'right' // or 'left'

How should this be implemented in your opinion?

I think we might be able to achieve this just with CSS, leaving the markup alone.

cc @jhildenbiddle for CSS expertise here.

Are you willing to work on this yourself?

Of course (if/when I get the time)!

[trusktr]

Turns out it was easy to do, it took only a few minutes to modify 3 numbers in the CSS:

Of course the menu icon should be re-positioned too.

I’ll make a draft PR once I circle back (I’d like to finish the SSR tests in the other PR).

[trusktr]

@paulhibbitts See these lines:

https://github.com/docsifyjs/docsify/blob/c2cf163fc0a02378f27792ce58ac6e5fc5a8bf65/src/themes/basic/_layout.styl#L209

(try changing left to right)

https://github.com/docsifyjs/docsify/blob/c2cf163fc0a02378f27792ce58ac6e5fc5a8bf65/src/themes/basic/_layout.styl#L423

(Similar, position from the right)

https://github.com/docsifyjs/docsify/blob/c2cf163fc0a02378f27792ce58ac6e5fc5a8bf65/src/themes/basic/_layout.styl#L443

(Possibly negate a number if it moves the wrong direction)

That’s about it! Oh, and the sidebar hamburger button needs to be repositioned to the right as well.

Adding an option could simply set, for example, a CSS var to tell the styling to use left or right in a non-breaking way.