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