Quiero que la barra lateral desaparezca con gracia en el lado (animado) cuando alterno, (desafortunadamente, no creo que el sandbox admita javascript). Actualmente, los valores de dos clases son:
expanded: 'w-1/4' hidden: 'w-0 invisible'Pero el w-0 no establece la barra lateral en ancho-0px, todavía es visible, por lo que también agregué la clase 'invisible'.
Además, no quiero que los componentes se mezclen a medida que la barra lateral se hace más pequeña, quiero que se deslice desde un lado sin que los componentes reaccionen al tamaño (si eso tiene sentido)
Soy nuevo en Tailwind-CSS, por lo que agradecería cualquier ayuda.
<!-- Tailwind --> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <!-- Body --> <div class='p-5'> <div class="flex flex-row-reverse"> <div class='h-screen p-7 duration-300 w-1/4 bg-indigo-500' }> Sidebar </div> <div class='w-full'> <div> Header Bar </div> <main> Main Content <br> <button id='toggle-sidebar' class='px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out'>Toggle Sidebar</button> </main> </div> </div> </div>He creado la siguiente caja de arena para demostrar aquí.
Por lo tanto, debe agregar overflow-hidden transition-all al elemento de la barra lateral para animar y ocultar todo el contenido dentro de la barra lateral. Pero puede ver una pequeña parte de la barra lateral, esto se debe a que tenemos una clase p-7 (relleno) y debemos eliminarla, si queremos ocultar completamente la barra lateral. Especialmente para esto podemos crear clases adicionales y colocar todo lo necesario para intercambiarlas.
PD El nombre de la clase oculta fue tomado por Tailwind. No intente animar con esta clase, ya que display: none no se puede animar.
const button = document.getElementById('toggle-sidebar'); const sidebar = document.getElementById('sidebar'); button.addEventListener('click', () => { if (sidebar.classList.contains('sidebar-hidden')) { sidebar.classList.add('sidebar-expanded'); sidebar.classList.remove('sidebar-hidden'); } else { sidebar.classList.add('sidebar-hidden'); sidebar.classList.remove('sidebar-expanded'); } }); <script src="https://cdn.tailwindcss.com"></script> <style type="text/tailwindcss"> @layer utilities { .sidebar-expanded { @apply w-1/4 p-7; } .sidebar-hidden { @apply w-0 p-0; } } </style> <div class="p-5"> <div class="flex flex-row-reverse"> <div id="sidebar" class="flex h-screen bg-indigo-500 overflow-hidden transition-all duration-300 sidebar-expanded"> Sidebar </div> <div class="w-full"> <div>Header Bar</div> <main> Main Content <br /> <button id="toggle-sidebar" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"> Toggle Sidebar </button> </main> </div> </div> </div>