burger on mobile

it’s a week that I’m stucked with the burger menu on mobile/small screen. When I click on the burger nothing happens even if everything seems good with the code. Where am I wrong?

Here the HTML / PHP

            <nav class='navbar'>
            <div class='burger'>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </div>
            <div class='navmenu'>
                <?php wp_nav_menu(array(
                    'theme_location' => 'headerMenuLocation'
                )); ?>
            </div>
        </nav> 

HERE THE JS

let burger = document.querySelector('.burger');
let nav = document.querySelector('.navmenu');
burger.onclick = function () { 
nav.classList.toggle('wide'); 
};

AND HERE THE FUNCTIONS.PHP to execute the JS

<?php
add_action( 'after_setup_theme', 'whitetheme_setup' );

function whitetheme_file() {
    
// Load CSS
wp_enqueue_style( 'header', get_template_directory_uri() . '/css/header.css');
wp_enqueue_style( 'footer', get_template_directory_uri() . '/css/footer.css');
wp_enqueue_style( 'video-home', get_template_directory_uri() . '/css/video- 
home.css');
wp_enqueue_style( 'body', get_template_directory_uri() . '/css/body.css');

// Load JS
wp_enqueue_script( 'burger-menu', get_template_directory_uri() . '/js/burger- 
mobile.js', array('jquery'), 1.0, true);

}

add_action('wp_enqueue_scripts', 'whitetheme_file');

?>

Any help is really really appreciated!