點擊響應下拉菜單后，它應該顯示菜單列表項，而不是什么也沒發生，它只是狀態相同。

<!-- header design -->

  <header class="header">
    <a href="#" class="logo">Portfolio</a>

    <i class='bx bx-menu' id="menu-icon"></i>

    <nav class="navbar">
      <a href="#home" class="active">Home</a>
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#portfolio">Portfolio</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

css在這里

.logo{
    font-size: 2.5rem;
    color: var(--text-color);
    font-weight: 600;
    cursor: default;
  }
 
  .navbar{
    margin-left: 35%;
  }

  .navbar a{
     font-size: 1.7rem;
     color: var(--text-color);
     margin-left: 4rem;
     transition: .3s;
     text-decoration: none;
  }

  .navbar a:hover,
  .navbar a.active{
     color: var(--main-color);
  }


  #menu-icon{
    font-size: 3.6rem;
    color: var(text);
    display: none;
  }

media query

@media (max-width:768px) {
     #menu-icon{
      display: block;
     }

     .navbar{
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      padding: 1rem 3%;
      background: var(--bg-color);
      border-top: .1rem solid rgba(0,0,0, .2);
      box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
      display: none;
     }

     .navbar.active{
      display: block;
     }

     .navbar a {
      display: block; 
      font-size: 2rem;
      margin: 3rem 0;
     }
}

Javascript在這里

// toggle icon navbar//
Let menuIcon = document.querySelector('#menu-icon');
Let navbar = document.querySelector('.navbar');

menuIcon.onclick = () => {
    menuIcon.classList.toggle('bx-x');
    navbar.classList.toggle('active');
};



/*scroll sections active links*/

let sections = document.querySelectorAll('section');
let navLinks = documents.querySelectorAll('header nav a');

window.onscroll = () => {
    sections.forEach(sec => {
     Let top = window.scrollY;
     Let offset = sec.offsetTop - 150;
     Let height = sec.offsetHeight;
     Let id = sec.getAttribute('id');

     if(top => offset && top < offset + height){
         navLinks.forEach(links => {
            links.classList.remove('active');
            document.querySelector('header nav a[href*=' + id+ ']').classList.add('active');
         });
     };
    });

    /*sticky navbar*/
    let 
};

期望菜單圖標顯示下拉菜單，但是什么也沒有發生。