Implement collapsible sidebar with smooth animation #77
Conversation
|
Sweet!
Would you mind actually separating this? I'm very open to having a collapsible sidebar now and so on, but it would be nice to collaborate a bit on it between the two of us and that becomes easier if we split up the dependency stuff 🙏 |
ntninja
force-pushed
the
feat-sidebar-collapse
branch
from
c499341 to
9a014e8
Compare
Animation support needs a newer Framer-Motion version which pulls in newer React which again is only supported by newer Chakra.
The old `ReactDOM.render` function is deprecated in React 18. See: https://reactjs.org/link/switch-to-createroot
The connection indicator was moved to the right so that it always remains visible everything else is collapsed, when pressing the new menu button. A few places use slightly different spacing to making everything work. Unfortunately, Chakra does not provide a “Horizontal Collapsible” component (only a vertical collapsible and an horizontal overlay drawer), so a DIY approach inspired by https://v2.chakra-ui.com/community/recipes/horizontal-collapse was needed by to implement this with nice animations. Fixes ekzhang#61
ntninja
force-pushed
the
feat-sidebar-collapse
branch
from
9a014e8 to
66f29c3
Compare
|
@ekzhang: Done! (The dependency stuff is entirely constraint to the package*.json files, except for that one commit to initialize the DOM differently.) |
This comment has been minimized.
This comment has been minimized.
|
Could you separate the dependency changes into a different PR? I don't really want to review a +1300 line feature PR |
|
Sorry it's been several months @ntninja — I think we should have the collapsible sidebar, but the interface designer in me isn't happy with the implementation here (specifically the choice of icons, the layout, and so on). I have some time now though so I probably think it'll be quicker to implement from scratch. |
|
Not really sure what you mean, but I guess I’ll see what you mean when its published. |
The connection indicator was moved to the right so that it always remains
visible everything else is collapsed, when pressing the new menu button.
A few places use slightly different spacing to making everything work.
Unfortunately, Chakra does not provide a “Horizontal Collapsible” component
(only a vertical collapsible and an horizontal overlay drawer), so a DIY approach
inspired by https://v2.chakra-ui.com/community/recipes/horizontal-collapse was
needed by to implement this with nice animations.
Updates to React 18 + Chakra 2 + Framer-Motion 11, since animation support
needs a newer Framer-Motion version which pulls in newer React which again
is only supported by newer Chakra.
Fixes #61
Based on #75, no real dependency through.
It looks pretty decent 🙂