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');

?>

THIS IS THE CSS

.burger {
cursor: pointer;
margin-right: 20px;
display: none;
}

.icon-bar {
display:block;
width: 22px;
height: 2px;
margin: 5px;
background-color: #fff;
margin-left: auto;
}

.navmenu .current-menu-item a { 
color: blue;
}

@media screen and (max-width: 768px) {

.column-2 {
    display: none;
}

.navmenu ul {
   /** display: none; **/
    display: block;
    position: fixed;
    left: -270px;
    width: 260px;
    height: 100%;
    top: 0;
    z-index: 10;
    transition: transform .5s ease-in-out;
    margin-right: 0;
    background-color: salmon;
    padding-left:10px;
    padding-right:10px;
}

.wide {
    transform: translate(270px 0);
}

.navmenu ul li {
    box-sizing: border-box;
    display: block;
    line-height: 50px;
    border-bottom: 2px solid whitesmoke;
    margin-bottom: 5px;
    margin: 0;
    box-sizing: border-box;
}


.burger {
    display: block;
}
}

Any help is really really appreciated!