I have a problem in svelteKit with a collision. The button opens the menu but when I try to close it, it doesn't. When I click outside the button, this triggers 'handleClickOutside' which calls 'clickOutside.js' and then closes the menu.

I think that the problems is that 'element.contains' include the button and for that the menu didnt close.

however, I couldn't fix it.

I'm using tailwindUI, tailwindCSS, SvelteKit.

Thanks for your comments!

(Image)

index.svelte

<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);
        }
    };
}