Drawer

This pattern is also known as off-canvas.
<div class="container">
<!-- Backdrop -->
<div class="container__overlay"></div>
<!-- Sidebar -->
<div class="container__sidebar">
...
</div>
</div>
.container {
/* Container takes full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.container__overlay {
/* Take full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
/* User still can see the content of main page */
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
}
.container__sidebar {
/* Take full height */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 200px;
/* Background */
background-color: #fff;
}