Mohammad Saifullah Mohammad Saifullah - 4 months ago 34
jQuery Question

React js right sidebar: fade-in fade-out from the right side

I am trying to make a simple right sidebar which should fade in from right side onclick. Here is the example of a sidebar which appears from left:

Jsfiddle
code

Any clue? My knowledge of CSS; HTML and react JS is elementary. So any help or suggestion will be appreciated.

Answer

I've updated the fiddle for you:

https://jsfiddle.net/cc96ku6t/3/

You needed to change left to right basically in the css:

header { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: lightcoral;
}
.sidebar {
  position: absolute;
  top: 60px;
  right: -300px;
  height: 100%;
  width: 300px;
  transition: left .3s ease-in-out;
  background-color: white;
}
.sidebar-toggle {
  position: absolute;
  top: 20%;
  left: -60px;
  height: 60px;
  width: 60px;
  z-index: 1;
}
.content {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 100%;
  transition: left .3s ease-in-out;
  background-color: lightgray;
}
.sidebar.open {
    right: 0;
}
.content.open {
    right: 300px;
}
Comments