Adding 2 buttons to minimize the sidebars on nodejs > learn "docs

[kshitjj]

Enter your suggestions in details:

What is the problem this feature will solve?

the sidebars are not minimizable, which causes the body to have less width, which cramps the body.

What is the feature you are proposing to solve the problem?

adding two buttons, which would allow a dev to minimize the sidebars.

[dtsuper3]

@ovflowd can we use an arrow icon as content for the buttons?

[ovflowd]

I'd say so? But we could use arrow-left-end-on-rectangle and arrow-right-end-on-rectangle from https://heroicons.com/

[dtsuper3]

@ovflowd This feature to minimize the sidebar requires client-side interactivity due to that reason we have to introduce a state to control whether the sidebar is minimized. Can I use "use client" in LearnLayout? I will then add a new class in ArticleLayout based on this state to control the grid widths.

[ovflowd]

Hmmm, wouldn't add an use client on the Metabar and the Sidebar components be enough? 👀

[bmuenzenmeyer]

I'm also curious how this effort may relate to #6821

[abizek]

#6821 modifies the default behavior while this behavior is opt-in (hide the sidebar if needed). It seems like we are going with open as the default sidebar state here. #6821 also keeps the metabar below the article up to a larger breakpoint than before to give more space to the article. Sidebar controls could still be used on the left sidebar in that case.

I'm actually curious to see where the state control buttons will be placed (in both open and closed states) without appearing clunky or crowding the header as we are not moving the sidebars up in z axis here and the sidebar state affects the width occupied by the article.

[ovflowd]

I believe, as @abizek, the best approach would be for #6821 to be the default behavior. And then the feature described on this issue only works on non-mobile screens.

And if you hide the meta bar/sidebar, well, on mobile screens, they become respectively on the bottom of the article and the select button.