Skip to content

Instantly share code, notes, and snippets.

@rafibomb
Created February 6, 2019 21:42
Show Gist options
  • Save rafibomb/03f14c9ee6b2f0d261d1f04b9c576aa6 to your computer and use it in GitHub Desktop.
Save rafibomb/03f14c9ee6b2f0d261d1f04b9c576aa6 to your computer and use it in GitHub Desktop.
$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');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment