Drop down menu not functioning properly

I’m working on the reponsiveness of my site using media queries. when i click on the icon, the menu drops but when i click agaiin to return… it doesn’t return.

my html code

<nav>
  <img src="../images/shotbyopi.logo (5).png" alt="logoPic" />
  <ul id="sidemenu">
    <li><a href="#">Home</a></li>
    <hr />
    <li><a href="#about-1">About</a></li>
    <hr />
    <li><a href="#wrapper">Services</a></li>
    <hr />
    <li><a href="#contact">Contact</a></li>
  </ul>
  <i class="fa-solid fa-circle-chevron-down" onclick="toggleMenu()"></i>
</nav>

This is my css for the specific screens i’m working on

@media (min-width: 481px) and (max-width: 768px) {
  nav .fa-circle-chevron-down {
    display: block;
    font-size: 85px;
    position: fixed;
    top: 20px;
    right: 20px;
    color: transparent;
    -webkit-text-stroke: 4px #fff;
    z-index: -2;
    transition: transform 0.5s ease-in-out;
    margin-top: 60px;
    cursor: pointer;
  }

  nav img {
    width: 325px;
    height: 325px;
  }

  nav .fa-solid:hover {
    transform: translateY(-10px);
    transform: rotate(90deg);
  }

  nav ul {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-left: 0;
    background: transparent;
    position: fixed;
    text-align: center;
    margin-top: 20px;
    top: -100vh;
    left: 0;
    width: 27%;
    height: 100vh;
    padding: 50px 20px;
    z-index: 2;
    transform: translateX(230%);
    transition: top 0.5s ease-in-out;
  }

  /* When the menu is active */
  nav ul.show-menu {
    top: 0; /* Slide down into view */
  }

  /* Styling for individual list items */
  nav ul li {
    margin: 5px 0;
    font-size: 1.5rem;
  }

  /* Make sure links are styled clearly */
  nav ul li a {
    color: white;
    text-decoration: none;
  }
}

The provided CSS code seems to be styling a navigation element (nav) with a menu icon and a list of items.

my javascript code for the functionality of the menu bar

function toggleMenu() {
    const menu = document.getElementById('sidemenu');
    const toggleIcon = document.querySelector('.toggle-menu');
  
    menu.classList.toggle('show-menu');
    toggleIcon.classList.toggle('rotate');
  }
  
  document.addEventListener('DOMContentLoaded', () => {
    const toggleIcon = document.querySelector('.toggle-menu');
  
    if (toggleIcon) {
      toggleIcon.addEventListener('click', toggleMenu);
    } else {
      console.error('Element with class "toggle-menu" not found.');
    }
  });

I tried to get a correction from Gemini AI, but it began to show me errors, below is the javascript code

function toggleMenu() {
  const menu = document.getElementById('sidemenu');
  const toggleIcon = document.querySelector('.toggle-menu');

  menu.classList.toggle('show-menu');
  toggleIcon.classList.toggle('rotate');
}

document.addEventListener('DOMContentLoaded', () => {
  const toggleIcon = document.querySelector('.toggle-menu');

  if (toggleIcon) {
    toggleIcon.addEventListener('click', toggleMenu);
  } else {
    console.error('Element with class "toggle-menu" not found.');
  }
});