• HTML
• CSS

HTML

<div class="contenedor" x-data="{abrir:false}" :class="{'activar':abrir}">
    <p>
        <strong>Alpine.js</strong> le ofrece la naturaleza reactiva y 
        declarativa de grandes marcos como Vue o React 
        a un costo mucho menor.
        <em>
            <strong>Sígueme en Github:</strong>
            <a href="https://github.com/washi-denz" target="_blank">Seguir</a>
        </em>
    </p>
    <div class="icon-menu btn" @click="abrir=!abrir"></div>
</div>

CSS

body{
    font-family:sans-serif;
}

*{
    padding:0px;
    margin:0px;
    box-sizing:border-box;  
}

.contenedor{
    position:fixed;
    top:0;
    left:0;
    width:200px;
    height:100vh;
    background:#d35400;
    transition:0.3s all;
    margin-left:0px;
    z-index:1000;
}

.contenedor.activar{
    margin-left:-200px;
}

.contenedor p{
    padding:0.5rem;
    color:#fae5d3;
}

.contenedor .btn{
    position:absolute;
    top:2rem;
    right:auto;
    margin-left:100%;
    font-size:2rem;
    cursor:pointer;
}