0

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

1 respuesta 1

4

Tu contenedor main se desborda porque lo estás trasladando 236 píxeles a la derecha. La propiedad translateX no modifica su ancho, simplemente lo mueve a la derecha, por lo que a menos que reduzcas su ancho, su width permanecerá igual.

Puedes hacer lo siguiente, crear un contenedor que ocupará el 100% de tu pantalla + 236px, que es lo que estableciste para la barra lateral. Obviamente solo se mostrará en pantalla la parte del 100%, de manera que cuando quieras mostrar la barra lateral, agregues un margen de 236px y todo se mostrará en pantalla.

Te adjunto un demo con tu código.

let sidebar = document.getElementById("side");
let main = document.getElementById("main");
let button = document.getElementById("mybutton");

button.addEventListener("click", function(e) {
  sidebar.classList.toggle('closed');
}, false);
*{margin:0;}
.App {
  position: relative;
  left: -236px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;
  color: white;
  width: calc(100% + 236px);
}

main {
  background: black;
  border: 2px solid #f4c;
  flex: 1;
  transform: translateX(0px);
  transition: transform .7s;
}


aside>div {
  background-color: #000000;
  position:relative;
  top: 0;
  transition: margin-left .7s;
  height: 100%;
  width: 236px;
  margin-left: 0;
}

aside div.closed {
  margin-left: 236px;
}
<div class="App">
  <aside>
    <div id='side'>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus nihil sunt nesciunt doloribus ullam inventore, laborum odit magnam cumque. Nostrum nihil voluptates ab dolores voluptas mollitia possimus facilis nemo consequuntur?
    </div>
  </aside>
  <main id='main'>
    <button id='mybutton'>
      show/hide
    </button> hola
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus nihil sunt nesciunt doloribus ullam inventore, laborum odit magnam cumque. Nostrum nihil voluptates ab dolores voluptas mollitia possimus facilis nemo consequuntur?
  </main>
</div>

4
  • gracias por responder, ya había intentado una solución parecida a la que propones, el problema es cuando el sidebar tiene contenido (por ejemplo si le pones más texto) se puede ver como el texto se va acomodando conforme el width va cambiando en la animación y quiero evitar ese efecto tan extraño
    – Rene Limon
    Commented el 21 sept. 2021 a las 0:36
  • Dejame editar a ver si te doy otra alternativa.
    – Jaime
    Commented el 21 sept. 2021 a las 0:37
  • @ReneLimon checa si esta solución te sirve. Saludos.
    – Jaime
    Commented el 21 sept. 2021 a las 1:03
  • 1
    Gracias por tu ayuda
    – Rene Limon
    Commented el 21 sept. 2021 a las 22:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.