Estoy tratando de crear una barra lateral izquierda que alterna el estado (mostrar/ocultar)
estados
x y el contenido tiene un ancho calc(100vw - x) Esto es lo que he hecho, pero esa transición parece un poco fuera de lugar y parece que margin-left no es el camino a seguir con la transición.
document.addEventListener('DOMContentLoaded', function () { const WIDTH = '250px'; let opened = false; const button = document.querySelector('#toggleSidebar'); const sidebar = document.querySelector('.sidebar__container .sidebar'); const sidebarContent = document .querySelector('.sidebar__container .sidebar__content'); button.addEventListener('click', function () { opened = !opened; if (opened) { sidebar.style.width = WIDTH; sidebarContent.style.marginLeft = WIDTH; sidebar.classList.add('sidebar--open'); } else { sidebar.style.width = '0px'; sidebarContent.style.marginLeft = '0px'; sidebar.classList.remove('sidebar--open'); } }); }); .sidebar__container { display: flex; height: 150px; position: relative; } .sidebar__container .sidebar { position: absolute; left: -100px; height: 100%; background: lightblue; transition: 0.6s; } .sidebar__container .sidebar--open { transition: 0.6s; left: 0; } .sidebar__container .sidebar__content { background-color: lightcoral; flex: 1; transition: 0.6s; } <button id="toggleSidebar">Toggle</button> <div class="sidebar__container"> <aside class="sidebar"> Side Bar Menu </aside> <section class="sidebar__content"> Main Content </section> </div>Cualquier sugerencia sobre cómo hacerlo será útil.
PD: no puedo establecer el ancho en CSS porque estoy tratando de convertirlo en un componente compartible
Jugó un poco, y esto parece más suave (Chrome):
document.addEventListener('DOMContentLoaded', function () { const WIDTH = '250px'; let opened = false; const button = document.querySelector('#toggleSidebar'); const sidebar = document.querySelector('.sidebar__container .sidebar'); button.addEventListener('click', function () { opened = !opened; sidebar.style.flexBasis = opened ? WIDTH : '0px'; }); }); .sidebar__container { display: flex; height: 150px; position: relative; } .sidebar__container .sidebar { flex: 0; height: 100%; background: lightblue; overflow:hidden; transition: 0.6s; } .sidebar__container .sidebar__content { background-color: lightcoral; flex: 1; transition: 0.6s; } <button id="toggleSidebar">Toggle</button> <div class="sidebar__container"> <aside class="sidebar"> Side Bar Menu </aside> <section class="sidebar__content"> Main Content </section> </div> La clave es usar flex-basis en lugar de left / margin-left , ya que su container ya es flex .