Import script in a page

document.addEventListener('DOMContentLoaded', function () {
    const dropdowns = document.querySelectorAll('.dropdown');

    dropdowns.forEach(function(dropdown: Element) {
        const action = dropdown.querySelector('.dropdown-action') as HTMLElement;
        const menu = dropdown.querySelector('.dropdown-menu') as HTMLElement;

        if (action !== null && menu !== null) {
            menu.classList.add('animate__animated', 'animate__bounceOut');

            // Wait for animation to end to add hidden class
            menu.addEventListener('animationend', (event) => {
                if(!menu.classList.contains('hidden')) {
                    if ((event as AnimationEvent).animationName === 'bounceOut') {
                        // Add the hidden class after the bounceOut animation ends
                        menu.classList.add('hidden');
                    }
                }
            });

            // On click, add animation to show or hide the dropdown
            action.addEventListener('click', () => {
                // Check if the menu is currently hidden
                if (menu.classList.contains('animate__bounceOut')) {
                    // Show the menu and add animation classes
                    menu.classList.remove('hidden');
                    menu.classList.remove('animate__bounceOut');
                    menu.classList.add('animate__bounceIn');
                } else {
                    // Hide the menu and remove animation classes
                    menu.classList.remove('animate__bounceIn');
                    menu.classList.add('animate__bounceOut');
                }
            });
        }
    });
});