Resizable sidebar

[Soneji]

Feature request

What problem does this feature solve?

Sometimes I have long headings which can get cut off on my sidebar. A resizable sizebar would be handy to solve this issue

What does the proposed API look like?

window.$docsify = {
    //...
    loadSidebar: true,
    resizeSidebar: true, // <- new
    //...
}

How should this be implemented in your opinion?

You can click on the sidebar and drag it to resize it.

It should be disabled on mobile.

Are you willing to work on this yourself?

Yes, but I would like some suggestions on the best way to implement this feature, and where in the codebase I should work.

[yanbutan]

Hi any update on this? Or any hacky way to achieve this you've explored?

[Soneji]

Sorry @yanbutan I have not touched this since opening the issue. I would still love to see this feature if you or any of the 7 peopple who thumbs up'd this post want to work on it...

[trusktr]

This would be an interesting feature. You can see in this screenshot, there are three elements:

They each have 300px width. Someone would need to add an invisible element along the edge of the sidebar for dragging, then adjust the 300px value of the elements.

Here's how the CSS adjustment would work:

Peek.2021-12-31.11-23.mp4

Should be fairly easy to enable this with an option!

[yanbutan]

I managed to do it by adjusting their root css through some js events. I tried to change the css properties for that aside tag with .sidebar, but I rmbr it dint work as expected. I will try to find some time and upload snippets of my code when, maybe it can help some people. Also, it may not be the best way to do it so feel free to suggest ways to improve.

[jhildenbiddle]

This issue has been addressed by PR #2469. The changes will be available when Docsify v5 is released.

1. Sidebar links now wrap by default.
2. Site administrators have the option of clamping sidebar links to a single line with ellipses if preferred
3. Site administrators have the option to customize the sidebar width:

   :root {
     --sidebar-width: 280px;
   }