document.addEventListener('DOMContentLoaded', (event) => { const dropdown = document.querySelector('.dropdown'); const dropbtn = document.querySelector('.dropbtn'); const dropdownContent = document.querySelector('.dropdown-content'); const gearIcon = document.querySelector('#gear'); // Add an event listener to the drop button dropbtn.addEventListener('click', () => { const isVisible = dropdownContent.style.visibility === 'visible'; if (isVisible) { // Hide the dropdown menu dropdownContent.style.visibility = 'hidden'; dropdownContent.style.opacity = '0'; dropdownContent.style.maxHeight = '0'; gearIcon.style.transform = 'rotate(0deg)'; } else { // Show the dropdown menu dropdownContent.style.visibility = 'visible'; dropdownContent.style.opacity = '1'; dropdownContent.style.maxHeight = '1000px'; gearIcon.style.transform = 'rotate(180deg)'; } }); // Add an event listener for clicks outside the dropdown window.addEventListener('click', (event) => { if (!dropdown.contains(event.target) && window.innerWidth <= 768) { // Close the dropdown if clicked outside and on mobile dropdownContent.style.visibility = 'hidden'; dropdownContent.style.opacity = '0'; dropdownContent.style.maxHeight = '0'; gearIcon.style.transform = 'rotate(0deg)'; } }); });