Drawer is a sliding panel that opens to provide quick access to additional content or navigation.
<div class="c-drawer">
<button class="c-drawer__trigger">Open Drawer</button>
<div class="c-drawer__panel">
<h3>Drawer Content</h3>
<button class="c-drawer__exit">Close Drawer</button>
</div>
<span class="c-drawer__panel-underlay"></span>
</div>
.c-drawer__trigger, .c-drawer__exit {
padding: 10px;
border-radius: 5px;
border: none;
font-size: 16px;
cursor: pointer;
transition: all 0.2s ease;
}
.c-drawer__trigger {
background-color: #33aef7;
}
.c-drawer__trigger:hover {
background-color: #0889d5;
}
.c-drawer__exit {
background-color: #ff3c26;
margin-top: 20px;
}
.c-drawer__exit:hover {
background-color: #ff250d;
}
.c-drawer__panel {
width: 250px;
padding: 20px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 100;
transform: translateX(-100%);
transition: all 0.2s ease;
}
.c-drawer__panel.is-active {
transform: translateX(0%);
}
.c-drawer__panel.is-active + .c-drawer__panel-underlay {
opacity: 0.3;
visibility: visible;
}
.c-drawer__panel-underlay {
content: '';
background-color: #000;
position: fixed;
inset: 0;
opacity: 0;
visibility: hidden;
z-index: 99;
transition: all 0.2s ease;
}
.c-drawer {
&__trigger,
&__exit {
padding: 10px;
border-radius: 5px;
border: none;
font-size: 16px;
cursor: pointer;
transition: all 0.2s ease;
}
&__trigger {
background-color: #33aef7;
&:hover {
background-color: darken(#33aef7, 15%);
}
}
&__exit {
background-color: #ff3c26;
margin-top: 20px;
&:hover {
background-color: darken(#ff3c26, 5%);
}
}
&__panel {
width: 250px;
padding: 20px;
background-color: #000;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 100;
transform: translateX(-100%);
transition: all 0.2s ease;
&.is-active {
transform: translateX(0%);
+ .c-drawer__panel-underlay {
opacity: 0.3;
visibility: visible;
}
}
}
&__panel-underlay {
content: '';
background-color: #000;
position: fixed;
inset: 0;
opacity: 0;
visibility: hidden;
z-index: 99;
transition: all 0.2s ease;
}
}
const drawerPanel = document.querySelector('.c-drawer__panel');
const drawerTrigger = document.querySelector('.c-drawer__trigger');
const drawerExit = document.querySelector('.c-drawer__exit');
drawerTrigger.addEventListener('click', () => {
drawerPanel.classList.add('is-active');
});
drawerExit.addEventListener('click', () => {
drawerPanel.classList.remove('is-active');
});