Problem with navigation menu in my simple HTML page. Need to click the hamburger icon twice to open the menu.

Question

I stuck on a problem while designing the header for my blog..
* The action I wanted is that whenever user clicks the hamburger icon, the menu will open.
* If the user clicks the hamburger icon when the menu is open, the menu will close,
* When the user clicks outside the menu when the menu is open, then it will also close the menu.
Everything thing upto here is working fine.

But the problem is that when the user opens the menu by clicking the hamburger icon and closes the menu by clicking outside the menu area, I should press the hamburger menu twice to open the menu.
Please check my code to see the problem and help me to fix it, thank you.
https://code.sololearn.com/WFyHGNqw2680/?ref=app

Answer 1

https://code.sololearn.com/WS93gQC7p0PA/#html

Answer 2

Your problem is at line 109 remove window. leaving just menuOpen = false;

"let does not create properties of the window object"
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Answer 3

Use menuOpen as global variable
line 43 is perfect for var menuOpen = false ;

Answer 4

https://code.sololearn.com/WIbVocEVc2l6/?ref=app

u didn't really do like we told u😉

Answer 5

Thank you Frogged and ODLNT for your answer.
I tried both one by one and also combined, but it is not working (the problem is same)😌
Can you send me the working version of the code.

Answer 6

Frogged doing that doesn't close the menu by pressing the X button😂, only clicking outside does.
I have been trying to solve this since yesterday, if one method is working, another doesn't 😔