• 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" style="color:blue;">Seguir</a>
        </em>
        <br>
        <em>Ojo para que no haya problemas usa Íconos de fontello u otros.</em>
    </p>
    <div class="btn" @click="abrir=!abrir" :class="{'icon-left-open-big':!abrir,'icon-menu':abrir}"></div>
</div>

CSS

body{
    font-family:monospace;
}

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

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

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

.contenedor p{
    border:1px dotted #bfc9ca;
    padding:0.5rem;
    margin:0.5rem;
    color:#bfc9ca;
}

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