</div>
</div>
-<script>
- document.addEventListener('alpine:init', () => {
- Alpine.store('menu', {
- isOpen: false,
- toggle() {
- this.isOpen = !this.isOpen;
- document.getElementById('menu-overlay').classList.toggle('opacity-0');
- document.getElementById('menu-overlay').classList.toggle('invisible');
- document.querySelector('[x-ref="menuPanel"]').classList.toggle('translate-x-full');
- document.body.style.overflow = this.isOpen ? 'hidden' : '';
- },
- close() {
- if (this.isOpen) {
- this.toggle();
- }
- }
- });
- });
-
- function closeMenu() {
- Alpine.store('menu').close();
- }
-
- document.getElementById('menu-toggle').addEventListener('click', () => {
- Alpine.store('menu').toggle();
- });
-
- // Close menu on Escape key
- document.addEventListener('keydown', (e) => {
- if (e.key === 'Escape') {
- closeMenu();
- }
- });
-</script>