<script>
document.addEventListener('DOMContentLoaded', function() {
  // Select all nav links
  var navLinks = document.querySelectorAll('.ld-nav-link');

  // Set the second nav link as active initially
  if (navLinks.length > 1) {
    var secondNavLink = navLinks[1];
    var circle = secondNavLink.querySelector('.ld-menuu-ball'); // Update this selector to target your circle element
    secondNavLink.classList.add('active');
    if (circle) {
      circle.style.display = 'block';
    }
  }

  // Add hover and active effects
  navLinks.forEach(function(link, index) {
    var circle = link.querySelector('.ld-menuu-ball'); // Update this selector to target your circle element

    // Show the circle on hover
    link.addEventListener('mouseenter', function() {
      circle.style.display = 'block';
    });

    // Hide the circle on mouse leave if it's not the active link
    link.addEventListener('mouseleave', function() {
      if (!link.classList.contains('active')) {
        circle.style.display = 'none';
      }
    });

    // Toggle the active state on click
    link.addEventListener('click', function(e) {
      // Check if the link is not the first one
      if (index !== 0) {
        e.preventDefault();
        // Remove the active class from all nav links and hide their circles
        navLinks.forEach(function(l) {
          l.classList.remove('active');
          var lCircle = l.querySelector('.ld-menuu-ball'); // Use the same selector as above
          if (lCircle) {
            lCircle.style.display = 'none';
          }
        });
        // Add the active class to the clicked nav link and show its circle
        link.classList.add('active');
        circle.style.display = 'block';
      }
      // For the first link, allow the default action to proceed
    });
  });
});
</script>