React side bar (but sexy?)

Sidebar component

For the impatient, the source code is here.

Let’s being by laying our sidebar component. The structure is pretty straight forward:

Believe it or not but designers call the three horizontal bars as a hamburger button.

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

We have the hamburger button separated from the actual side bar since it will be laid out on a nav bar, unlike the sidebar which will have a fixed position.

Inside the sidebar we have a close button and the content, which can be anything you want.

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.

isOpen will also influence the css class we assign to the side bar.

  • If true we assign .SideBar.Active (open)
  • 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.

The transition attribute is what will make css animate the position from left: -100% to left: 0%, when we change the class (see css class .Sidebar.Active below):

When the sidebar is active, its left position is 0% meaning its open:

How the css class change influence the position of the sidebar

When we change the class, css triggers an animation so the change is smooth (all thanks to the transition attribute)

Bonus round: You can also make your close button stick to the top left side of your sidebar so it is aligned with the hamburger button. We also give it a nice scaling animation when we hover over it:

Result

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

Can anything be improved? Did we miss anything? Give us your thoughts in the comments!