Remove event click in JavaScript

Question

I have two functions to open and close sidenav. I added feature, when you click outside nav you trigger function closeNav(). Sidenav is closed, but event click is still on whole document, so I have to removeEventListener. I've tried a lot but no attempt was effective. Any ideas how to do this?

JS

//  Show sidenav 
var sideNav = document.getElementById('rizkSidenav');

function openNav() {
    sideNav.style.width = "83%";

    // Close nav when clicked outside 
    document.addEventListener("click", function(evt) {  
        targetElement = evt.target;  // clicked element
        do {
            if (targetElement === sideNav) {
            // This is a click inside. Do nothing, just return.
                return;
            }
            // Go up the DOM
            targetElement = targetElement.parentNode;
        } while (targetElement);
        // This is a click outside.
        closeNav();
    });
}

function closeNav() {
    sideNav.style.width = "0";
    //????? (event listener should be removed)
    document.removeEventListener("click", function(evt){});
}

Answer 1

Because it is not the same function. Try this on:

var sideNav = document.getElementById('rizkSidenav');

var myFunction = function(evt) {  
        targetElement = evt.target;  // clicked element
        do {
            if (targetElement === sideNav) {
            // This is a click inside. Do nothing, just return.
                return;
            }
            // Go up the DOM
            targetElement = targetElement.parentNode;
        } while (targetElement);
        // This is a click outside.
        closeNav();
    }

function openNav() {
    sideNav.style.width = "83%";

    // Close nav when clicked outside 
    document.addEventListener("click", myFunction);
}

function closeNav() {
    sideNav.style.width = "0";
    //????? (event listener should be removed)
    document.removeEventListener("click", myFunction);
}