hello-theme/dev/js/frontend/hello-frontend.js

class elementorHelloThemeHandler {
    constructor() {
        this.initSettings();
        this.initElements();
        this.bindEvents();
    }

    initSettings() {
        this.settings = {
            selectors: {
                menuToggle: '.site-header .site-navigation-toggle',
                menuToggleHolder: '.site-header .site-navigation-toggle-holder',
                dropdownMenu: '.site-header .site-navigation-dropdown',
            },
        };
    }

    initElements() {
        this.elements = {
            window,
            menuToggle: document.querySelector( this.settings.selectors.menuToggle ),
            menuToggleHolder: document.querySelector( this.settings.selectors.menuToggleHolder ),
            dropdownMenu: document.querySelector( this.settings.selectors.dropdownMenu ),
        };
    }

    bindEvents() {
        if ( ! this.elements.menuToggleHolder || this.elements.menuToggleHolder?.classList.contains( 'hide' ) ) {
            return;
        }

        this.elements.menuToggle.addEventListener( 'click', () => this.handleMenuToggle() );

        this.elements.dropdownMenu.querySelectorAll( '.menu-item-has-children > a' )
            .forEach( ( anchorElement ) => anchorElement.addEventListener( 'click', ( event ) => this.handleMenuChildren( event ) ) );
    }

    closeMenuItems() {
        this.elements.menuToggleHolder.classList.remove( 'elementor-active' );
        this.elements.window.removeEventListener( 'resize', () => this.closeMenuItems() );
    }

    handleMenuToggle() {
        const isDropdownVisible = ! this.elements.menuToggleHolder.classList.contains( 'elementor-active' );

        this.elements.menuToggle.setAttribute( 'aria-expanded', isDropdownVisible );
        this.elements.dropdownMenu.setAttribute( 'aria-hidden', ! isDropdownVisible );
        this.elements.dropdownMenu.inert = ! isDropdownVisible;
        this.elements.menuToggleHolder.classList.toggle( 'elementor-active', isDropdownVisible );

        // Always close all sub active items.
        this.elements.dropdownMenu.querySelectorAll( '.elementor-active' ).forEach( ( item ) => item.classList.remove( 'elementor-active' ) );

        if ( isDropdownVisible ) {
            this.elements.window.addEventListener( 'resize', () => this.closeMenuItems() );
        } else {
            this.elements.window.removeEventListener( 'resize', () => this.closeMenuItems() );
        }
    }

    handleMenuChildren( event ) {
        const anchor = event.currentTarget;
        const parentLi = anchor.parentElement;

        if ( ! parentLi?.classList ) {
            return;
        }

        parentLi.classList.toggle( 'elementor-active' );
    }
}

document.addEventListener( 'DOMContentLoaded', () => {
    new elementorHelloThemeHandler();
} );