[Sidebar]: Implement component

[loris]

Just wanted to know, is there a reason the sidebar component is not implemented nor planned? I would need it for a project so I could work on it

[asvetliakov]

Will be implemented soon, since i need it in project too

[TimNZ]

Any progress?

[asvetliakov]

No promises but will try to look in next week.

[mdarcemont]

Hi,

I started to work on the Sidebar implementation. I planned to fully develop the component then do a pull-request, but due to a lack of time (for now) and knowledge in react-motion, I'm currently not able to propose a full implementation.

I based my implementation on the Accordion component, however the differences between this component and the sidebar are the causes of my unsuccess for now.The height of the accordion body depends of its content and so it's easy to do the animation using react-measure and react-motion. For the Sidebar, there is a fixed width (default : 260px), it's not depending of its contents. So, instead of an animation that widens the sidebar from 0px to 260px, I currently have an animation that widens the sidebar from 0px to n px (n = width of the content inside the sidebar)
I don't know how to improve this using react-motion. For now, the best solution I found is to manually set the width of the content inside the sidebar ... Ugly !

Is there a reason to not to use React CSS Transition ? Performance issues, maybe ? I guess it would be fairly simple to do this using it.

Maybe I'll try to finish it later, if nobody does it before me.

Here is my current (and unfinished and probably buggy) implementation :
mdarcemont@0d06f28

[asvetliakov]

@mdarcemont
Glad to hear that!
I'd avoid using react-motion for sidebar since it will kill performance and transitions will be sluggy for most people (application pushable content should be pure and it's hard to achieve that - most people are not using something like reselect).
To implement sidebar i think you need 3 components, Sideable/Pushable, SidebarComponent (which holding sidebar itself) and Sidebar Manage component. You don't need React CSS transition or react-motion for that - just setting translate3d in style for Sidable/Pushable component (check how semantic implemented sidebar) and applying correct sidebar transition className will be enough.

[mdarcemont]

@asvetliakov
Clever approach ! This seems to be the way to go.
Do you plan to implement it soon ? If no, I'm gonna try to do it ... when I'll have time.

[asvetliakov]

@mdarcemont
Unfortunately i don't have time in this month for such large changes (if they're not required by my work). We've planned to use sidebar but decided to go with our implementation since semantic sidebars don't support dock modes