search

balloob / react-sidebar

A sidebar component for React
http://balloob.github.io/react-sidebar/example/
MIT License
1.47k stars 224 forks source link

Consider option to push page content #74

Open tonygentilcore opened 7 years ago

tonygentilcore commented 7 years ago

Realizing this would be a departure from the MD spec, would this project consider a disabled by default option to push page content as the sidebar opens rather than overlap it? That's hard to word, see the "push" option of http://negomi.github.io/react-burger-menu/ for example.

I have a hacky patch that does this, but wanted to check whether it'd be accepted before spending time cleaning it up.

balloob commented 7 years ago

This is what the docked property does. See the demo: http://balloob.github.io/react-sidebar/example/

tonygentilcore commented 7 years ago

Perfect! Apologies for the noise.

tonygentilcore commented 7 years ago

So, actually there's one wrinkle. While toggling docked on the demo gives the animation I'm looking for, I'd like the same touch behavior as toggling open.

balloob commented 7 years ago

That seems like a weird user experience. Would you expect the content to resize while you are dragging the sidebar left-right ?

I also think that it would be very expensive because the content will have to resize without the browser able to optimize it, many times per second. In the case of docked we use a CSS transition + will-change: left (oh, actually I see now that we don't do the latter).

tonygentilcore commented 7 years ago

No, I definitely wouldn't want resizing (you're right that'd be a bad user experience as well as slow). I'd like clipping (same behavior as react-burger's "push" animation). But I think I can clip by overriding default styles from outside of this component.

martin-braun commented 5 years ago

That seems like a weird user experience. Would you expect the content to resize while you are dragging the sidebar left-right ?

Actually, take a look at this page on smaller window width: https://ant.design/components/grid/ Take inspection to the side navigation drawer they have there, it pushes the content of the page without resizing it. I think this is what @tonygentilcore wants and I'd love to see an option for that, too.

ivan-aksamentov commented 5 years ago

Another example of "push" effect is illustrated in react-burger-menu demo (option "push").

react-burger-menu however does not support the "responsive sticky" feature that react-sidebar has. And I desperately want both.