filter-panel

$filter-panel-width: rem-calc(368);
$filter-panel-background: $white;
$filter-panel-transition-easing: $offcanvas-transition-timing;
$filter-panel-transition-timing: $offcanvas-transition-length;
$filter-panel-content-padding: 1rem;
$filter-panel-z-index: 12;
$filter-panel-shadow: -1px 0 10px 0 rgba($black, 0.4);

.filter-panel {
  position: fixed;
  height: calc(100vh - #{$nav-global-height});
  top: $nav-global-height;
  right: 0;
  width: $filter-panel-width;
  background: $filter-panel-background;
  z-index: $filter-panel-z-index;
  transform: translateX(100%);
  transition: transform $filter-panel-transition-easing $filter-panel-transition-timing;

  &.is-open {
    box-shadow: $filter-panel-shadow;
    transform: translateX(0);
  }
}

.filter-panel-inner {
  @include vertical-scroll;
  height: 100%;
  padding: $filter-panel-content-padding;
}


<div class="filter-panel" id="filterPanel">
  <button id="closeFilterPanel" class="close-button">&times;</button>

  <div class="filter-panel-inner">
    <ul class="menu vertical filter-list">
      <li><a>Filter item</a></li>
      <li><a>Filter item</a></li>
      <li><a>Filter item</a></li>
      <li><a>Filter item</a></li>
      <li><a>Filter item</a></li>
    </ul>

    <ul class="menu vertical filter-list">
      <li><a>Filter item</a></li>
      <li><a>Filter item</a></li>
      <li><a>Filter item</a></li>
      <li><a>Filter item</a></li>
      <li><a>Filter item</a></li>
    </ul>
  </div>

</div>

var toggleFilterButton = document.getElementById('toggleFilter');
var closeFilterPanel = document.getElementById('closeFilterPanel');
var filterPanel = document.getElementById('filterPanel');

if (toggleFilterButton) {
  toggleFilterButton.onclick = function () {
    toggleFilterButton.classList.add('is-active');
    filterPanel.classList.toggle('is-open');
    closeFilterPanel.classList.remove('is-open');
  }

  closeFilterPanel.onclick = function () {
    toggleFilterButton.classList.remove('is-active');
    filterPanel.classList.toggle('is-open');
  }
}