.side-bar.hidden ~ .main-content{
    /* flex-basis: 100% !important;
    width: 100% !important; */
}

.side-bar {
  transition: transform 0.3s ease;
  transform: translateX(0);
}

.side-bar.hidden {
  transform: translateX(-100%) !important;
  opacity: 0;
  display: none;
  transition:  ease-out opacity 2000ms;
}
.side-bar.hidden #sideBarBtn {
  display: none;
}

.side-bar.hidden ~ .main-content{
    flex-basis: 100% !important;
    width: 100% !important;
}