BookStackApp / BookStack

A platform to create documentation/wiki content built with PHP & Laravel
https://www.bookstackapp.com/
MIT License
15k stars 1.88k forks source link

Dynamically show or hide sidebars i #4461

Open Coros opened 1 year ago

Coros commented 1 year ago

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: Alt text

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?

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 commented 1 year ago

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 commented 1 year ago

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.