search

nodejs / nodejs.org

The Node.js® Website
https://nodejs.org
MIT License
5.99k stars 6.16k forks source link

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

Open kshitjj opened 1 month ago

kshitjj commented 1 month ago

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.

image

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

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

dtsuper3 commented 4 weeks ago

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

ovflowd commented 4 weeks ago

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

dtsuper3 commented 3 weeks ago

@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.

Untitled
ovflowd commented 3 weeks ago

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

bmuenzenmeyer commented 3 weeks ago

I'm also curious how this effort may relate to https://github.com/nodejs/nodejs.org/pull/6821

abizek commented 3 weeks ago

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 commented 3 weeks ago

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.