.sidebar {
  z-index: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transition: 400ms ease;
}
/* Right!! */
.sidebar-right {
  background: #F3F3F3;
  width: 300px;
  left: auto;
  right: 0;
}

.sidebar-right-in .sidebar-right {
  opacity: 1;
  z-index: 100;
  -webkit-transition: opacity  600ms cubic-bezier(1, 0, 1, 0), width 400ms ease;
}
.sidebar-right {
  z-index: -100;
  opacity: 0;
  -webkit-transition: opacity  10ms cubic-bezier(1, 0, 1, 0), width 400ms ease;
}

.sidebar-right-in .app {
  width: calc(100% - 320px) !important;
  -webkit-transition: opacity  600ms cubic-bezier(1, 0, 1, 0), width 400ms ease;
}
/* Left!! */
.sidebar-left {
  background: #F3F3F3;
  width: 300px;
  left: 0;
  right: auto;
}

.sidebar-left-in .sidebar-left {
  opacity: 1;
  z-index: 100;
  -webkit-transition: opacity  600ms cubic-bezier(1, 0, 1, 0), width 400ms ease;
}
.sidebar-left {
  z-index: -100;
  opacity: 0;
  -webkit-transition: opacity  10ms cubic-bezier(1, 0, 1, 0), width 400ms ease;
}

.sidebar-left-in .app {
  width: calc(100% - 320px) !important;
  -webkit-transition: opacity  600ms cubic-bezier(1, 0, 1, 0), width 400ms ease;
}

.app {
  width: 100%;
  -webkit-transition: opacity  600ms cubic-bezier(1, 0, 1, 0), width 400ms ease;
}

.sidebar-header, .app-name {
  position: relative;
  width: 100%;
  line-height: 70px;
  padding:  0 10px;
  font-size: 23px;
  color: #fff;
  margin: 0;
  z-index: 10;
}