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 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>I've created the following sandbox to demonstrate here.
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 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>