React side bar (but sexy?)

Sidebar component

For the impatient, the source code is here.

Note: We are sorry for the designer who had such strange looking hamburgers

Adding State

We add isOpen state to the side bar, a function toggleSideBar which when called will switch isOpen from true to false and vice versa.

  • If false we simply assign .SideBar (closed)

The CSS

Make the .SideBar position fixed and its height of 100 view port height. Make sure the z-index is 3 or more so the side bar is not buried under any elements on the page.

How the css class change influence the position of the sidebar

Result

Look at what we’ve created together, isn’t this beautiful?