TailwindCSS Sidebar that disappears on toggle-CodePudding

I want the sidebar to gracefully disappear into the side (animate) when I toggle, (unfortunately, I don't think the sandbox supports javascript). Currently, the two-class values are:

expanded: 'w-1/4'
hidden: 'w-0 invisible'

But the w-0 doesn't set the sidebar to width-0px, it is still visible hence why I added the 'invisible' class as well.

Also, I don't want the components to shuffle around as the sidebar gets smaller, I want it to slide in from the side without the components reacting to the size (if that makes sense)

I'm new to Tailwind-CSS so any help would be appreciated.

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div class='p-5'>
  <div >
    <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>

I've created the following sandbox to demonstrate here.

CodePudding user response：

So, you need to add overflow-hidden transition-all to the sidebar element to animate and hide all the content inside the sidebar. But, you can see a small part of the sidebar, this is bacause we have a class p-7 (padding) and we need to remove it, if we want completly hide the sidebar. Espesially for this we can create additional classes and place everthing we needed to swap them.

PS The hidden class name was taken by Tailwind. Don't try toanimate with this class, since display: none is not animatable.

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 >
  <div >
    <div id="sidebar" >
      Sidebar
    </div>
    <div >
      <div>Header Bar</div>
      <main>
        Main Content
        <br />
        <button id="toggle-sidebar" >
          Toggle Sidebar
        </button>
      </main>
    </div>
  </div>
</div>

CodePudding user response：

The official TailwindUI components has a free snippet for that: here
You can omit the backdrop part, the important code you need to animate is the translate-x class that needs to be applied/removed from the panel itself with a transition effect.