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;
                    }