[Ubivectel]

Привет мир.

Имеем кнопочку:

<div id="kide-menu" class="kide-menu-icon"><i id="bar" class="fa fa-ellipsis-v" aria-hidden="true"></i></div>

при клике на которую срабатывает скрипт:

let kideMenu = document.querySelector('.kide-menu');
    let kideMenuIcon = document.querySelector('#kide-menu');
    kideMenuIcon.addEventListener('click', kideMenuIconClick);

    function kideMenuIconClick() {
        kideMenu.classList.toggle('show-menu');
    }

и отображается / скрывается меню:

<div class="kide-menu">
   меню
</div>

очень бы хотелось скрывать его по клику вне его.
Нашел такой скрипт:

const box = document.querySelector('.kide-menu');
    document.addEventListener('click', (e) => {
        const click = e.composedPath().includes(box);
        if (!click) {
            kideMenu.classList.remove('show-menu');
        }
    });

Вот только теперь при клике на "kide-menu" срабатывает и событие на "document".
Не соображу как добавить в исключения

<div id="kide-menu" class="kide-menu-icon"><i id="bar" class="fa fa-ellipsis-v" aria-hidden="true"></i></div>