Navbar menu-icon and menu-items not behaving as expected

The menu Item should be hidden for default larger screens as for my stylesheet, and the menu-icon should be clickable as for my . The output should be a Menu Icon appearing in smaller screens 800px below then shows Menu items when clicked.

Here are the relevant codes:
html:

<div class="navbar">
                <div class="logo">
                    <img src="images/New Project.png" alt="" width="125px">
                </div>
                <nav class="nav" id="MenuItems">
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">Products</a></li>
                        <li><a href="">Contacts</a></li>
                        <li><a href="">Account</a></li>
                    </ul>
                </nav>
                <img src="images/cart.png" width="30px" height="30px" alt="">
                <img src="images/menu.png" class="menu-icon" onclick="menutoggle()">
            </div>

js:

 <!-- js for toggle menu -->

    <script>
        var MenuItems = document.getElementById("MenuItems");

        MenuItems.style.maxHeight = "0px";

        function menutoggle()
        {
            if(MenuItems.style.maxHeight == "0px")
                {
                    MenuItems.style.maxHeight = "200px"      
                }
            else
                {
                    MenuItems.style.maxHeight = "0px" 
                }
        }
    </script>

css:

.menu-icon{
    width: 28px;
    margin-left: 20px;
    display: none;
}

/* Navbar for smaller screens */

@media only screen and (max-width: 800px){
    nav ul{
        position: absolute;
        top: 70px;
        left: 0;
        background: #333;
        width: 100px;
    }

    nav ul li{
        display: block;
        margin-right: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    nav ul li a{
        color: #fff;
    }

    .menu-icon{
        display: block;
        cursor: pointer;
    }

}

I am having trouble debugging my code, I cannot find and Identify if it’s my script or style.css that causes the issue.

Here are the full codes in case someone need it.
index.html
style.css

The navbar should appear with a menu icon that is clickable and shows the contents (menu-items)
but I can’t seem to find the issue because of my spaghetti code, I am sorry.