Uncaught ReferenceError: toggleNav is not defined at HTMLDivElement.onclick

Question

and I can't find the answer, so I added a nav bar and a side menu, but it's not working, should appear slowly when I'm clicking the button, like an animation. If someone know where is the problem PLS help me, I tried to fix it, but I really don't know where is the problem.enter image description here

Down below is the JS, CSS and HTML code for the menu. The button is on top left corner, and when I'm clickin' , look: idk what to do

let toggleNavStatus = false;

let toggleNav = function() {
    let getSidebar = document.querySelector(".nav-sidebar");
    let getSidebarUl = document.querySelector(".nav-sidebar ul");
    let getSidebarspan = document.querySelector(".nav-sidebar span");
    let getSideBara = document.querySelectorAll(".nav-sidebar a");

    if (toggleNavStatus === false) {
        getSidebarUl.style.visibility = "visible";
        getSidebar.style.width = "272px";
        getSidebarspan.style.opacity = "0.5";

        let arrayLength = getSideBara.length;
        for (let i=0; i< arrayLength i++) {
            getSideBara[i].style.opacity = "1";
        }

        toggleNavStatus  == true;
    }

    else if (toggleNavStatus  === true) {
        getSidebar.style.width = "50px";
        getSidebarspan.style.opacity = "0.5";

        let arrayLength = getSideBara.length;
        for (let i=0; i< arrayLength i++) {
            getSideBara[i].style.opacity = "0";
        }

        getSidebarUl.style.visibility = "hidden";

        toggleNavStatus  == false;
    }

html {
  scroll-behavior: smooth;
}

body{
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: #8E8E8E;
    background: #E6E6E6;
}

.nav-main{
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    background-color: #F09726;
    display: flex;
    flex-wrap: wrap;
    z-index: 1000;
}

.btn_toggle-nav{
    width: 60px;
    height: 100%;
    background-color: #F09726;
    background-image: url(menu-icon.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    cursor: pointer;
}

.btn_toggle-nav:hover{
    opacity: 0.5;

}

.nav-main ul{
    float: left;
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
}

.nav-main ul li{
    list-style: none;
    line-height: 35px;

}

.nav-main ul li a{
    display: block;
    height: 100%;
    padding: 0 10px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    color: #111;
    font-family: 'Catamaran', sans-serif;
    font-size: 16px;
}

.nav-main ul li a:hover{
    color: white;
}

.nav-sidebar{
    position: fixed;
    left: 0px;
    bottom: 0;
    width: 60px;
    padding: 0 5px;
    height: calc(100vh - 60px);
    background-color: #1b1b1b;
    z-index: 1000;
    transition: all 0.3 ease-in-out;
}

.nav-sidebar ul{
    padding-top: 15px;
    overflow: hidden;
    visibility: hidden;

}

.nav-sidebar ul li{
    line-height: 60px;
    list-style: none;

}

.nav-sidebar ul li span, .nav-sidebar ul li a{
    display: block;
    height: 60px;
    padding: 0 10px;
    text-decoration: none; 
    text-transform: uppercase;
    color: white;
    font-family: 'Catamaran', sans-serif;
    font-size: 16px;
    white-space: nowrap; 
    opacity: 0; 
    transition: all 0.3 ease-in-out;
}    

.nav-sidebar ul li a:hover{
    background-color: #222;
}

<nav class="nav-main">
      <div class="btn_toggle-nav" onclick="toggleNav()"></div>
      <ul>
        <li><a href="index.php">IEȘIRE</a></li>
        <li><a href="index.php">IEȘIRE</a></li>
        <li><a href="index.php">IEȘIRE</a></li>
        <li><a href="index.php">IEȘIRE</a></li>
        <li><a href="index.php">IEȘIRE</a></li>
        <li><a href="index.php">IEȘIRE</a></li>
      </ul>
    </nav>

    <aside class="nav-sidebar">
      
      <ul>
        <li><span>IEȘIRE</span></li>
        <li><a href="index.php">IEȘIRdsfffffffffffffE</a></li>
        <li><a href="index.php">IEȘIRfaddddE</a></li>
        <li><a href="index.php">IEȘIRafsssssssssssssE</a></li>
        <li><a href="index.php">IEȘIsaffffffffffffffRE</a></li>
        <li><a href="index.php">IEȘIRsfaaadafsdsdE</a></li>
      </ul>

    </aside>