I have created this navigation menu:

https://codepen.io/dtommy79/pen/xxXYQdr

When i click on the mobile menu icon, the menu opens and the icon is changed into X. When I click the X, the menu closes. However, when I double click on the menu icon, the menu opens (the way it's supposed to), but the icon changes back to the default (closed) state.

I was thinking maybe disabling double click could work (maybe I'm wrong), so I tried to use eventlistener with dblclick event.

I also tried some of the jquery suggestions from here.

I'd need a pure js solution preferably.