so I'm working on a website with flask/jinja + tailwindcss. I have this html with a tiny bit of js for state management. Currently the sidebar just appears in it's full state instead of animating in like I want it to.
There's also a codepen if you want to look at that
<body>
<!-- Top Bar -->
<nav class="flex items-center bg-mainbg p-3 sticky top-0 z-50">
<div class="flex items-center">
<button aria-label="Button for opening the navigation menu" class="inline-flex p-3 hover:bg-valoreddarker rounded lg:hidden ml-auto transition ease-in-out duration-100 text-white" onclick="menuToggle()">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
<a href="/" class="p-2 mr-4 inline-flex items-center rounded-lg">
<img src="../static/images/Valobot logo raze thicckened.png" alt="Logo" class="h-10 mr-4">
<span class="text-xl font-bold uppercase tracking-wide text-white">
Razebot
</span>
</a>
</div>
</nav>
<!-- Side bar similar to discord dev portal -->
<menu id="sidebar" class="left-0 max-w-full w-0 bg-black text-white h-screen transition-all">
<li>
<a href="/dashboard/{{guild_id}}/general">
General
</a>
</li>
<li>
<a href="/dashboard/{{guild_id}}/updates">
Updates
</a>
</li>
<li>
<a href="/dashboard/">
Roles
</a>
</li>
</menu>
</body>
</html>
<script>
// Probably could do this in python but it was just easier in js
// Basic Statemanagement for the dashboard
function menuToggle() {
let menu = document.getElementById("sidebar")
menu.classList.toggle("w-0")
}
</script>P.S sorry for the long code block, html kinda be like that