Burger de Navbar

Bonjour,

Je suis confrontée à 2 problèmes qui me paraissent très bêtes, mais que je ne sais pas résoudre.

1) J'ai donc une barre de navigation. Le HTML ressemble à ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<nav>
            <div class="logo">
                <img src="./images/CaptureLogo.PNG" alt="logo du site monsite">
            </div>
            <div class="navbar">  
 
                    <ul class="links">
                        <li class="menu">
                            <a href="#">Accueil</a>
                        </li>
                        <li class="menu">
                            Test<span class="chevron">  &blacktriangledown;</span>
                            <ul class="sub-menu">
                                <li><a href="#">Débutant</a></li>
                                <li><a href="#">Intermédiaire</a></li>
                                <li><a href="#">Confirmé</a></li>
                                <li><a href="#">Avancé</a></li>
                            </ul>
                        </li>      
                    </ul>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuK6B0_VRCkC5yToC6GPHAUHjBXuAGDKfIrA&usqp=CAU" alt="icone hamburger pour les écrans les + petits" class="hamburger">
            </div>    
        </nav>

en gros.
Evidemment, je souhaiterai que quand mon user clique sur le hamburger le menu se déroule, puis quand il clique sur un menu le sous-menu apparaît à son tour.

En JS, j'ai donc ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const hamburger = document.querySelector(".hamburger");
const links = document.querySelector(".links");
 
 
if (window.innerWidth <= 970) {  
 
  hamburger.addEventListener("click", () => {
    links.classList.toggle("toggle-hamburger");  // l'ul de tous les menus  
  });
 
  for (let i=1; i < 5; i++) { 
    menus[i].addEventListener("click", () => {
      sousMenus.forEach(sousMenu => sousMenu.classList.remove("toggle"));
      const sousMenu = menus[i].querySelector(".sub-menu");
        sousMenu.classList.toggle('toggle');
 
 
  }); 
}
 
}

Sauf que, tel quel, ça ne fonctionne pas. En tout cas, le toggle sur le menu ne fonctionne pas, quand je re-clique dessus il ne se ferme pas.

2) Autre chose, je souhaiterai aussi que quand mon user clique ailleurs sur la page, le menu se ferme.
Sauf que dès que je mets un eventListener sur body par exemple, j'ai une erreur JS, qui me dit qu'il ne peut pas mettre un EventListener sur undefined.

Comment on fait ça ?

D'avance merci de votre patience