I have created an Astro component called <Header>. Within this component, there is a menu button that should toggle the visibility of another component when clicked. Below is how I have defined my component:
---
let menuHidden = true;
---
<section id="header-all"
class="container min-w-full bg-gradient-to-br from-blue-700 to-blue-500">
<header class="container mx-auto px-5 flex items-center justify-between h-36">
<button id="menuButton">
<i class='lg:hidden bx bx-menu text-white text-4xl'></i>
</button>
</header>
{!menuHidden &&
<div class="container hidden lg:hidden mx-auto px-5">
<nav class="flex flex-col py-5 rounded-lg bg-gray-100 px-10 text-gray-100 text-xl">
<a href="#" class="py-3 text-2xl font-semibold text-gray-800 hover:bg-yellow-300 hover:rounded-lg px-5">Home</a>
</nav>
</div>
}
</section>
<script is:inline>
const menuButton = document.getElementById('menuButton');
menuButton?.addEventListener("click", () => {
menuHidden = !menuHidden;
console.log("menu hidden: ", menuHidden);
})
</script>
Upon clicking the button, I encounter the following error in the console:
(index):904 Uncaught ReferenceError: menuHidden is not defined
at HTMLButtonElement.<anonymous> ((index):904:9)
I am seeking advice on how to achieve this functionality within Astro.