como en este ejemplo, cuando toggle-sidebar tiene una clase active , el ancho de la sidebar debe cambiar a width:0; y el margin-left la clase de content debería cambiar de 60px a 0
aquí está el código de referencia:
.sidebar{ width: 60px; } .content{ margin-left: 60px; } <div class="wrapper"> <div class="header"> <div class="toggle-sidebar">icon</div> </div> <div class="main d-flex"> <div class="sidebar "> <ul> <li>Home</li> <li>Dashboard</li> <li>Contact Us</li> <li>About us</li> </ul> </div> <div class="content flex-fill"></div> </div> </div>En términos generales, puede usar la especificidad del selector de CSS (buenas lecturas aquí y aquí ) para anular algunos estilos en función de algunas condiciones, como la estructura de marcado, el tamaño de la pantalla, etc.
En particular para su ejemplo, puede explotar el hecho de que el elemento de content está justo después del elemento de la sidebar en el DOM, y hacer uso del operador + CSS que apunta a un elemento que coincide con la segunda parte del selector (después de + ) solo si aparece inmediatamente después de un elemento que coincide con la primera parte. Al igual que:
.sidebar + .content { margin-left: 0; } Agregar esta regla dentro de su etiqueta <style> aplicará margin-left: 0; a .content solo si .sidebar se representa justo antes, y al ser un selector más específico, anulará la declaración inicial .content . Verá en el panel Elementos de sus Herramientas para desarrolladores que el margin-left: 60px; la regla está tachada.
Además, para aplicar el margen solo cuando la barra lateral está abierta, puede usar la misma técnica de esta manera:
.sidebar.sidebar-open + .content { margin-left: 60px; }