script.js

const navbar = document.getElementById('navbar');
const navLinks = document.getElementById('navLinks');
const navIndicator = document.getElementById('navIndicator');
const navLinkItems = document.querySelectorAll('.nav-link');
const menuToggle = document.getElementById('menuToggle');
const themeToggle = document.getElementById('themeToggle');
const pages = document.querySelectorAll('.page');

function moveIndicator(link) {
  if (window.innerWidth <= 600) return;
  const linkRect = link.getBoundingClientRect();
  const navRect = navLinks.getBoundingClientRect();
  navIndicator.style.left = `${linkRect.left - navRect.left}px`;
  navIndicator.style.width = `${linkRect.width}px`;
}

function switchPage(pageName) {
  pages.forEach(p => p.classList.toggle('active', p.dataset.page === pageName));
  navLinkItems.forEach(link => {
    const isActive = link.dataset.page === pageName;
    link.classList.toggle('active', isActive);
    if (isActive) moveIndicator(link);
  });
}

navLinkItems.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    switchPage(link.dataset.page);
    navLinks.classList.remove('open');
  });
});

menuToggle.addEventListener('click', () => navLinks.classList.toggle('open'));

themeToggle.addEventListener('click', () => {
  document.body.classList.toggle('light');
  themeToggle.innerHTML = document.body.classList.contains('light')
    ? '<i class="fa-solid fa-sun"></i>'
    : '<i class="fa-solid fa-moon"></i>';
});

window.addEventListener('scroll', () => {
  navbar.classList.toggle('scrolled', window.scrollY > 20);
});

window.addEventListener('resize', () => {
  const activeLink = document.querySelector('.nav-link.active');
  if (activeLink) moveIndicator(activeLink);
});

setTimeout(() => moveIndicator(document.querySelector('.nav-link.active')), 100);