// Get references to the toggle button and menu list
const navToggle = document.querySelector('.site-nav__toggle');
const navList = document.querySelector('.site-nav__list');

// Add event listeners for click and keydown events
navToggle.addEventListener('click', toggleNav);
navToggle.addEventListener('keydown', handleKeyPress);
navList.addEventListener('keydown', handleKeyPress);

function toggleNav() {
// Toggle the "active" class on the toggle button and "visible" class on the menu list
navToggle.classList.toggle('active');
navList.classList.toggle('visible');

// Set focus to the toggle button when the menu is opened
if (navToggle.classList.contains('active')) {
navToggle.focus();
}
}

function handleKeyPress(e) {
// Check if the user pressed the "Enter" key
if (e.keyCode === 13) {
// If the toggle button has focus, toggle the menu
if (e.target === navToggle) {
toggleNav();
} else {
// If a menu item has focus, activate it
e.target.click();
}
}
}

// Add a focus event listener to each menu item
const navItems = document.querySelectorAll('.site-nav__list li');
navItems.forEach(function(item) {
item.addEventListener('focus', function() {
// Add a class to the menu item when it receives focus
item.classList.add('focus');
});
item.addEventListener('blur', function() {
// Remove the class from the menu item when it loses focus
item.classList.remove('focus');
});
});


//-------------for Time---------------


function updateTime() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    var ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? '0'+minutes : minutes;
    seconds = seconds < 10 ? '0'+seconds : seconds;
    var time = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
    document.getElementById('clock').innerHTML = time;
    setTimeout(updateTime, 1000); // update every second
  }
  updateTime();