Close nav (position fixed) when click outside but NOT when navlinks are clicked?

Question

I've looked everywhere and tried several things but I can't find a way to make the nav NOT closing when you click on a link. At this state it closes when I click anywhere.

I know it's because the nav is position FIXED so it's outside the document's flow and that's why clicking on the links is the same as clicking anywhere. What can I do?

Someone has an idea?

Thank you very much!

JS:

<script>
  window.addEventListener('mouseup', function(event) {
    var nav = $("#mySidenav");
    var navlinks = $("[id^='navLink']");
    if(event.target != nav && event.target != navlinks){
      closeNav();
    };
  })
</script>

CSS:

 .sidenav {
    height: 100%; 
    width: 25rem; 
    position: fixed; 
    z-index: 5;  
    left: -27rem;
    background: linear-gradient(15deg, #e2af40a9, rgba(51, 116, 116, 
    0.589)30%, rgb(51, 116, 116));
    overflow: hidden;
    padding-top: 1rem; 
    transition: all ease-in-out 0.4s; 
   }

HTML:

<div id="mySidenav" class="sidenav">
    <img id="logo" src="..." alt="...">

     <a href="javascript:void(0)" class="text-decoration-none closebtn" 
     onclick="closeNav()">&times;</a>
            
     <a id="navLink1" class="animNav item text-decoration-none align-bottom" 
     href="#">about</a>
            
      <a id="navLink2" class="animNav item text-decoration-none align-bottom" 
      href="#">another link</a>
            
       <a id="navLink3" class="animNav item text-decoration-none align-bottom" 
       href="#">another link</a>
            
       <a id="navLink4" class="animNav item text-decoration-none align-bottom" 
       href="#">another link</a>
            
       <a id="navLink5" class="animNav item text-decoration-none align-bottom" 
       href="#">another link</a>
</div>

    <button type="button" class="navbar-dark btn btn-styleNav navbar-toggler" onclick="openNav()" &#9776;>          
        <span class="navbar-toggler-icon"></span>
    </button>
    
    <script>
       function openNav() {
          $("#mySidenav").css({"left": "0rem"});}
                
        function closeNav() {
           $("#mySidenav").css({"left": "-27rem"});}
    </script>

Answer 1

Ok I found out what was not working: EventListeners dont understand Jquery. + my code was not really well written so I cleaned it up!

So, here is my working code, if it can help someone!

HTML

<!--NAVIGATION-->
<header>
    <div id="mySidenav" class="sidenav">
        <button type="button" id="closeButton">&times;</button>

        <a href="#">Link</a>

        <a href="#">Link</a>

        <a href="#">Link</a>

        <a href="#">Link</a>

        <a href="#">Link</a>
    </div>

    <button id="openButton" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
</header>

CSS

.sidenav {
    height: 100%;
    width: 25rem;
    position: fixed;
    z-index: 5;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0px;
    z-index: 1;
    overflow: hidden;
}

JS

//SIDENAV OPEN AND CLOSE DEPENDING ON WHERE YOU CLICK

var open = false;
//Opening and closing functions
function openNav() {
    $("#mySidenav").css({"left": "0rem"});
    open = true; 
}

function closeNav() {
    $("#mySidenav").css({"left": "-27rem"});
    open = false;
}
//Event on button to open the nav 
$("#openButton").click(function() {
    openNav();
    console.log("Opening nav")
});
//Event on button to close the nav
$("#closeButton").click(function() {
    closeNav();
    console.log("Closing nav")
});

//check if the nav is opened and if the element clicked is NOT the nav and if the element clicked is also NOT the navlinks (that is to say: you clicked anywhere else on the page) then, the nav closes.
document.addEventListener("mouseup", function(event){
    var nav = document.getElementById('mySidenav');
    if(open == true && event.target != nav && event.target.parentNode != nav){
            closeNav();
            console.log("Closing because the click was not on the nav and not on the nav links");
    //check if the nav is really closed
    } else if (open == false) {
        console.log("Nav is closed by default")
    }  
})