.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  @media (--m-up) {
    left: 0;
    border-right: var(--border);
  }

  @media (--s-down) {
    right: 0;
    border-left: var(--border);
    transform: translateX(var(--sidebar-width));
    transition: transform 200ms ease-in-out;
  }
}