Dark mode button only works on mobile screen

Question

i setup the navbar to be responsive, but now the dark mode button only works on the mobile screen,

this the html,css and js respectively

    <nav>
      <ul class="sidebar">
        <li onclick=hideSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Sign In</a></li>
        <li class='important'><a href="#">Get Started</a></li>
        <li><div class="btn">
          <div class="btn__indicator">
            <div class="btn__icon-container">
              <i class="btn__icon fa-solid fa-sun fa-moon"></i>
            </div>
          </div>
        </div></li>
      </ul>
      <ul>
        <li class="active hideOneMobile"><a href="">Home</a></li>
        <li class="hideOnMobile"><a href="#">Contact</a></li>
        <li class="hideOnMobile"><a href="#">Sign In</a></li>
        <li class='important hideOnMobile'><a href="#">Get Started</a></li>
        <li class="hideOnMobile"><div class="btn">
          <div class="btn__indicator">
            <div class="btn__icon-container">
              <i class="btn__icon fa-solid fa-sun fa-moon"></i>
            </div>
          </div>
        </div></li>
        <li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
      </ul>
    </nav>  

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav ul {
  visibility: unset;
  opacity: 1;
  background: none;
  display: flex;
  margin: 0;
  padding: 0;
  position: unset;
  height: auto;
  align-items: center;
  transform: translateX(0);
  width:100%;
  transition: all .3s;
} 
nav ul li a {
  color: var(--primary-color);
  font-size: 1.1em;
  font-weight: 700;
  padding: 0 1em;
  display: block;
  text-decoration: none;
}
.sidebar{
  position: fixed;
  top: 0; 
  right: 0;
  height: 100vh;
  width: 250px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  list-style: none;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 1000;
  
}
.sidebar li{
  width: 100%;
  margin: 1rem;
}
.sidebar .important{
  width: 8rem;
  margin-left: 1.8rem;
}
.sidebar .btn {
  margin-left: 0.8rem;
}
.sidebar a{
  width: 100%;
}
.menu-button{
  display: none;
}
@media(max-width: 800px){
  .hideOnMobile {
    display: none;
  }
  .active {
    display: none;
  }
  .sidebar .active{
    display: block;
  }
  .menu-button{
    display: block;
  }
}
@media(max-width: 400px){
  .sidebar{
    width: 100%;
  }
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav ul {
  visibility: unset;
  opacity: 1;
  background: none;
  display: flex;
  margin: 0;
  padding: 0;
  position: unset;
  height: auto;
  align-items: center;
  transform: translateX(0);
  width:100%;
  transition: all .3s;
} 
nav ul li a {
  color: var(--primary-color);
  font-size: 1.1em;
  font-weight: 700;
  padding: 0 1em;
  display: block;
  text-decoration: none;
}
.sidebar{
  position: fixed;
  top: 0; 
  right: 0;
  height: 100vh;
  width: 250px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  list-style: none;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 1000;
  
}
.sidebar li{
  width: 100%;
  margin: 1rem;
}
.sidebar .important{
  width: 8rem;
  margin-left: 1.8rem;
}
.sidebar .btn {
  margin-left: 0.8rem;
}
.sidebar a{
  width: 100%;
}
.menu-button{
  display: none;
}
@media(max-width: 800px){
  .hideOnMobile {
    display: none;
  }
  .active {
    display: none;
  }
  .sidebar .active{
    display: block;
  }
  .menu-button{
    display: block;
  }
}
@media(max-width: 400px){
  .sidebar{
    width: 100%;
  }
}

btn.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
  const isDarkMode = body.classList.contains('dark-mode');
  localStorage.setItem('dark-mode', JSON.stringify(isDarkMode));
  console.log(isDarkMode);
  // Toggle the spin animation class
  icon.classList.add('animated');
  setTimeout(() => {
    icon.classList.remove('animated');
  }, 500);
  if (isDarkMode) {
    icon.classList.remove('fa-sun');
    icon.classList.add('fa-moon');
    articleTitles.forEach(title => {
      title.classList.add('dark-mode');
    });
    articleAuthor.classList.add('dark-mode');
  } else {
    icon.classList.remove('fa-moon');
    icon.classList.add('fa-sun');
    articleTitles.forEach(title => {
      title.classList.remove('dark-mode');
    });
    articleAuthor.classList.remove('dark-mode');
  }
});

tried changing btn by hideOnMobile in the js code but it did not work, think the problem is with the "hideOnMobile" because with the media query is dissapears so everything works nice