Выпадающее меню не работает должным образом ⇐ CSS

[Anonymous]

Я работаю над отзывчивостью своего сайта с помощью медиа-запросов. когда я нажимаю на значок, меню закрывается, но когда я нажимаю еще раз, чтобы вернуться... оно не возвращается.
мой html-код

• Home
• About
• Services
• Contact

Это мой CSS для конкретных экранов, над которыми я работаю
@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;
}
}

Приведенный код CSS, похоже, стилизирует элемент навигации (nav) со значком меню и списком элементов.
мой код JavaScript для функциональность строки меню

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.');
}
});

Я пытался получить исправление от Gemini AI, но он начал показывать мне ошибки, ниже приведен код javascript
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.');
}
});


Подробнее здесь: https://stackoverflow.com/questions/790 ... g-properly