function getMenuElements(): { menu: HTMLElement; trigger: HTMLElement } | null {
    const menu = document.getElementById('navigationMenu');
    const trigger = document.getElementById('openMenu');

    if (!menu || !trigger) {
        return null;
    }

    return { menu, trigger };
}

function toggleMenu(event: Event): void {
    const elements = getMenuElements();
    if (!elements) {
        return;
    }

    const { menu, trigger } = elements;
    const isMenuOpen = menu.classList.contains('d-flex');

    if (isMenuOpen) {
        menu.classList.remove('d-flex');
        trigger.setAttribute('aria-expanded', 'false');
    } else {
        menu.classList.add('d-flex');
        trigger.setAttribute('aria-expanded', 'true');
    }

    event.stopPropagation();
}

function closeMenu(): void {
    const elements = getMenuElements();
    if (!elements) {
        return;
    }

    const { menu, trigger } = elements;
    menu.classList.remove('d-flex');
    trigger.setAttribute('aria-expanded', 'false');
}

document.addEventListener('DOMContentLoaded', () => {
    const elements = getMenuElements();
    if (!elements) {
        return;
    }

    const { menu, trigger } = elements;
    trigger.addEventListener('click', toggleMenu);
    document.addEventListener('click', closeMenu);
    menu.addEventListener('click', (event) => {
        // Prevent outside click handler from closing menu.
        event.stopPropagation();
    });
});