Dynamically show or hide sidebars i

[Coros]

Describe the feature you'd like

Please add functionality to collapse the left and right sidebar's in the triple column layout. Many popular products and sites have the ability to push a button/icon that will collapse those sidebar columns so the main page body content takes up the full browser window.

Example of an expanded (back image) and collapsed (front image) sidebar in Jira:

Describe the benefits this would bring to existing BookStack users

Pages with wide content is currently squished between the 2 exterior columns and may not receive proper formatting. Hiding these columns, on demand, would eliminate these formatting issues.

Can the goal of this request already be achieved via other means?

Not exactly. We can hide the sidebar using css styles but this is not performed on demand or a user/visitor/client selectable option.

Have you searched for an existing open/closed issue?

• [X] I have searched for existing issues and none cover my fundemental request

How long have you been using BookStack?

0 to 6 months

Additional context

There are similar feature requests to hide the sidebars under different scenarios but none that seem to request it be dynamic based on the visitor's view preferences. I would not want this to be a user setting but a simple toggle button at the top or bottom of the sidebars to be used on demand.

[ssddanbrown]

Hi @Coros, It's not so much that the sidebars are taking up room, it's more that the content width is specifically fixed to a certain max width and so the design/placement of sidebars has been built around that. Fundementally the desire here is for a wider content width.

My thoughts on that can be found in this comment, and previous discussion with potential workaround customizations can be found in https://github.com/BookStackApp/BookStack/issues/1757.

[Coros]

I've been using this header code to make the page content use more of the screen.
<style> @media screen and (min-width: 1400px) { .tri-layout-middle-contents { max-width: 100%; } } .page-content { max-width: 100%; } </style>

I was hoping to have the option to hide the sidebars so it would expand fully if the content on the page requires it. If I full screen my browser, the page displays fine. I typically keep my browser sized to the right half of my monitor (it's still a large monitor). When half sized, the page content is formatted in a way that is undesirable and having that collapse option would fix it.

[Saturo78]

Any news about this? I m thinking about moving from dokuwiki but the content area is currently quite narrow.

[aaronolsen]

I've written custom CSS+Javascript code that adds a button to the left sidebar to make it collapsible.

Here's what it looks like with the left sidebar expanded (button at top left).

And here's what it looks like when the left sidebar is collapsed:

The collapse button is visible when the window has a two-column layout (window widths between 1001 and 1400 pixels). When the window is less than 1001 pixels wide, the sidebar isn't present so it's not needed; when the window is wider than 1400 pixels, there's enough room for the main page content (in my opinion) so it's also not needed.

You can find the code, a full explanation of how it works, and a link to a working example page at https://3danatomystudios.com/coding/bookstack-hack-dynamic-collapsible-left-sidebar/.