How to properly Hide and Show navigation menu with html, css, and javascript

I am trying to make it so that when the menu icon on the top right of the screen is clicked, the navigate menu will toggle between showing and hiding.

Here is an image for context.

When the button on the top right is clicked, it does not toggle between showing and hiding at all.

Here is the code so far.

var menuBtn = document.getElementById("menuBtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")

menuBtn.onclick = function(){
    if(sideNav.style.right == "-250px"){
        sideNav.style.right = "0";
    }
    else{
        sideNav.style.right = "-250px";
    }
}

#sideNav{
    width: 250px; /*change font size of text in nav bar*/
    height: 100vh;
    position: fixed;
    right: 0;
    top:0;
    background: #009688;
    z-index: 2;
}
nav ul li{
    list-style: none;   
    margin: 45px 15px;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
}
#menuBtn{
    width: 50px;
    height: 50px;
    background: #009688;
    text-align: center;
    position: fixed;
    right: 30px;
    top: 20px;
    border-radius: 3px;
    z-index: 3;
    cursor: pointer;
}
#menuBtn img{
    width: 20px;
    margin-top: 15px;
}

<div id="sideNav">
    <nav>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">COVID-19</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">REVIEWS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>      
</div>
<div id="menuBtn">
    <img src="images/menu.PNG" id="menu">
</div>

Solution

You have typo in the 2nd line of javascript file. ...document.getElementById("sideNav ") should be var sideNav = document.getElementById("sidNav")

var menuBtn = document.getElementById("menuBtn")
    var sideNav = document.getElementById("sidNav")
    var menu = document.getElementById("menu")
    
    menuBtn.onclick = function(){
        if(sideNav.style.right == "-250px"){
            sideNav.style.right = "0";
        }
        else{
            sideNav.style.right = "-250px";
        }
    }

#sidNav{
    width: 250px; /*change font size of text in nav bar*/
    height: 100vh;
    position: fixed;
    right: 0;
    top:0;
    background: #009688;
    z-index: 2;
}
nav ul li{
    list-style: none;   
    margin: 45px 15px;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
}
#menuBtn{
    width: 50px;
    height: 50px;
    background: #009688;
    text-align: center;
    position: fixed;
    right: 30px;
    top: 20px;
    border-radius: 3px;
    z-index: 3;
    cursor: pointer;
}
#menuBtn img{
    width: 20px;
    margin-top: 15px;
}

<div id="sidNav">
        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">COVID-19</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">REVIEWS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>      
    </div>
    <div id="menuBtn">
        <img src="images/menu.PNG" id="menu">
    </div>