Estoy diseñando una interfaz en la que necesito hacer un sidebar para mostrar un offcanvas clásico pero estoy teniendo un problema de diseño. Cuando se muestra el sidebar se tiene que mover hacia la izquierda el contenido de main
respetando el width
actual (ajustándose automáticamente), pero al hacer esta animación el contenido de main se desplaza completamente generando un overflow en x
let sidebar = document.getElementById("side");
let main = document.getElementById("main");
let button = document.getElementById("mybutton");
button.addEventListener("click", function(e) {
sidebar.classList.toggle('closed');
main.classList.toggle('closed');
}, false);
.App {
display: flex;
flex-direction: row;
align-items: stretch;
height: 100vh;
color: white;
}
main {
background: black;
border: 2px solid #f4c;
flex: 1;
transform: translateX(0px);
transition: transform .7s;
}
main.closed {
transform: translateX(236px);
}
aside>div {
background-color: #000000;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 236px;
transform: translateX(-236px);
transition: transform .7s;
}
aside div.closed {
transform: translateX(0px);
}
<div class="App">
<aside>
<div id='side'>
sidebar
</div>
</aside>
<main id='main'>
<button id='mybutton'>
show/hide
</button> hola
</main>
</div>
Aún no logro evitar ese overflow, ojalá puedan ayudarme