How to create a sliding menu bar

<div class="container">
    <div class="slider open">Left Panel</div>
    <button class="toggle-button" onclick="toggleSlider()">< Close</button>
</div>

<script>
    function toggleSlider () {
        var slider = document.querySelector('.slider')
        var buttonSlider = document.querySelector('.toggle-button')
        if (!slider.classList.contains('open')){
            slider.classList.add('open')
            buttonSlider.innerHTML = '< Close'
        } else {
            slider.classList.remove('open')
            buttonSlider.innerHTML = '> Open'
        }
    }
</script>
<style>
.container{
    position: relative;
    width: 400px;
    height: 400px;
    background: #145677;
}

.slider{
    width: 200px;
    height: 400px;
    background: #945677;
    position: absolute;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translate3d(-200px, 0 ,0);
    will-change: transform;
    opacity:0;
}

.open{
    transform: translate3d(0, 0 ,0);
    opacity: 1;
}
.toggle-button{
    opacity:1;
    transform: translate3d(250px, 100px, 0);
}

</style>