.menu-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  flex-grow: 0;
  min-width: 250px;
  padding: 1rem 0;
  background-color: rgb(45, 50, 62);
  box-shadow: 4px 0 8px rgba(0, 0, 0, .5);
  transform: translate(-95%, 0);
  transition: transform .3s ease .4s;
}

.menu-wrapper:hover {
  transform: translate(0, 0);
  transition-delay: 0s;
}

.menu-wrapper.stuck {
  position: relative !important;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0) !important;
}

.menu .title {
  color: white !important;
  padding: .25rem 0 .25rem 1rem;
  font-weight: bold;
  font-size: 1.25rem;
  cursor: pointer;
  user-select: none;
  transition: background-color .2s ease, color .2s ease;
}

.menu .item {
  color: white !important;
  font-size: 1.125rem;
  padding: .25rem 2rem;
  overflow: auto;
  zoom: 1;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}

.menu .link {
  user-select: none;
}

.menu .item:hover, .menu .title:hover {
  background-color: #039be5 !important;
}

.menu-switch {
  position: absolute;
  top: 0;
  left: 100%;
  width: 2rem;
  height: 2rem;
  padding: 6px 0;
  background: rgb(45, 50, 62);
  box-shadow: 3px 0 6px rgba(0, 0, 0, .5), 3px 3px 6px rgba(0, 0, 0, .5);
  cursor: pointer;
}

.menu-switch > div {
  width: 1rem;
  height: 3px;
  background: white;
  margin: 3px auto;
  border-radius: 5px;
}