Jquery menu exclude item stop propagation

I am a beginner in web development and I have been trying to create a simple menu with a fade-in effect. It is working for the most part, I am however fighting a persistent issue with the Jquery here...

Here is a Fiddle that sums up my problem

I used stop.propagation so that the menu closes when I click anywhere on the document. Doing so closes the menu as intended.

However, clicking back on the nav icon to close the menu does not work anymore, while a click anywhere else will close it (you can try in the fiddle). There must be a conflict between stop.propagation and .prop.

As suggested here, I tried to implement the .closest method but my problem is not "parent-related" so I thought it was not relevant.

I do know Jquery too well. Perhaps someone could show me what I am not seeing here?

Thanks