Side bar styles

Sidebar.css

.sideBar {
  background: var(--dark);
  bottom: 0;
  box-shadow: var(--shadow);
  overflow: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;
  z-index: var(--z-drawer);
}

.right {
  right: 0;
}

.left {
  left: 0;
}

.closeControl {
  position: absolute;
  right: 10px;
  top: 10px;
}

.sideBar hr {
  background-color: var(--row-light);
}

.enterRighted {
  animation: enterRight 0.2s ease;
}

.exitRighted {
  animation: exitRight 0.2s ease forwards;
}

@keyframes enterRight {
  0% {
    transform: translate(100%, 0);
  }
}

@keyframes exitRight {
  100% {
    transform: translate(100%, 0);
  }
}

.enterLefted {
  animation: enterLeft 0.2s ease;
}

.exitLefted {
  animation: exitLeft 0.2s ease forwards;
}

@keyframes enterLeft {
  0% {
    transform: translate(-100%, 0);
  }
}

@keyframes exitLeft {
  100% {
    transform: translate(-100%, 0);
  }
}