Tengo un problema en svelteKit con una colisión. El botón abre el menú pero cuando trato de cerrarlo, no lo hace. Cuando hago clic fuera del botón, se activa 'handleClickOutside', que llama a 'clickOutside.js' y luego cierra el menú.

Creo que el problema es que 'element.contains' incluye el botón y por eso el menú no se cerró.

sin embargo, no pude arreglarlo.

Estoy usando tailwindUI, tailwindCSS, SvelteKit.

¡Gracias por tus comentarios!

( Imagen )

índice.esbelto

 <script> // @ts-nocheck import bostonLogo from '../../img/bostonLogo.png'; import { clickOutside } from '../../lib/clickOutside'; // Example Profile let profile = { name: 'Matias', lastName: 'Barletta' }; // Show/Hide Menu let menu = false; // COLLISION WITH HANDLENAV function handleClickOutside(event) { menu = false; } function handleNav() { menu = !menu; } </script> <div> <!-- Static sidebar for desktop --> <div class=" md:flex md:w-64 md:flex-col md:fixed md:inset-y-0" class:hidden={!menu}> <!-- Sidebar component, swap this element with another sidebar if you like --> <div use:clickOutside on:click_outside={menu? handleClickOutside : ''} class:absolute={menu} class:mt-11={menu} class="md:flex-1 md:flex md:flex-col md:min-h-0 bg-gray-800" > ...

clickOutside.js

 // @ts-nocheck /** Dispatch event on click outside of element */ // @ts-ignore export function clickOutside(element) { // @ts-ignore const handleClick = (event) => { console.log(event.target, document.body) // element exist?, element contain where i did click, preventDefault = false? if (element && !element.contains(event.target) && !event.defaultPrevented) { element.dispatchEvent( // Dispatch and create new custom event. new CustomEvent('click_outside', element) ); } }; // add eventlistener when you click on document document.addEventListener('click', handleClick, true); return { destroy() { document.removeEventListener('click', handleClick, true); } }; }