Ich versuche, HTML-CSS-JS responsiv zu machen, aber es funktioniert nicht wie erwartet. Wenn es minimiert ist, reagiert es bereits, aber beim Klicken funktioniert es nicht. Navigation und Navigationsleiste werden beim Klicken nicht angezeigt und ausgeblendet. HTML und CSS funktionieren Aber ich weiß nicht, was falsch oder falsch ist Kann mir jemand helfen?

let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

console.log(menu); // cek "menu-icon" 
console.log(navbar); // cek "navbar"

menu.onclick = () => {
    menu.classList.toggle("bx-x");
    navbar.classList.toggle("open");
}

#menu-icon
{
    font-size: 35px;
    color: var(--text-color);
    cursor: pointer;
    z-index: 10001;
    display: none;
}


/* ini untuk mengatur tampilan hp */
@media (max-width: 1280px)
{
    header
    {
        padding: 14px 2%;
        transition: .2s;
    }
    .navbar a
    {
        padding: 5px 0;
        margin: 0px 20px;
    };
}

@media (max-width: 1090px)
{
    #menu-icon
    {
        display: block;
    }   
    .navbar
    {
        position: absolute;
        top: 100%;
        right: -100%;
        width: 270px;
        height: 29hv;
        background: var(--main-color);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 10px;
        transition: all .50s ease;
    }

    .navbar .open
    {
        right: 2%;
    }
}

    
      <ul class="navbar">
        <li><a href="#" class="active">HOME</a></li>
        <li><a href="#">EVENT</a></li>
        <li><a href="#">ABOUT</a></li>
      </ul>
      <div class="main">
        <div class="bx bx-menu" id="menu-icon"></div>
      </div>
    </header>
    <!-- js link -->
    <script type="text/javascript" src="js/script">
    </script>