script.js

  const menuBtn = document.getElementById('menuBtn');
  const sidebar = document.getElementById('sidebar');
  const main = document.getElementById('main');
  const footer = document.getElementById('footer');
  const overlay = document.getElementById('overlay');
  const scrollTopBtn = document.getElementById('scrollTop');
  const isMobile = () => window.innerWidth <= 900;

  // Init sidebar state
  let sidebarOpen = !isMobile();

  function updateLayout() {
    if (isMobile()) {
      sidebar.classList.remove('collapsed');
      sidebar.classList.toggle('open', sidebarOpen);
      main.classList.add('expanded');
      footer.classList.add('expanded');
      overlay.classList.toggle('show', sidebarOpen);
      menuBtn.classList.toggle('open', sidebarOpen);
    } else {
      sidebar.classList.remove('open');
      sidebar.classList.toggle('collapsed', !sidebarOpen);
      main.classList.toggle('expanded', !sidebarOpen);
      footer.classList.toggle('expanded', !sidebarOpen);
      overlay.classList.remove('show');
      menuBtn.classList.toggle('open', sidebarOpen);
    }
  }

  menuBtn.addEventListener('click', () => {
    sidebarOpen = !sidebarOpen;
    updateLayout();
  });

  overlay.addEventListener('click', () => {
    sidebarOpen = false;
    updateLayout();
  });

  window.addEventListener('resize', () => {
    if (!isMobile()) {
      if (!sidebarOpen) sidebarOpen = true;
    }
    updateLayout();
  });

  updateLayout();

  // Active sidebar item on scroll
  const sections = document.querySelectorAll('.topic-section');
  const sidebarLinks = document.querySelectorAll('.sidebar-item');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        sidebarLinks.forEach(l => l.classList.remove('active'));
        const active = document.querySelector(`.sidebar-item[href="#${entry.target.id}"]`);
        if (active) {
          active.classList.add('active');
          active.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
        }
      }
    });
  }, { rootMargin: '-20% 0px -60% 0px' });

  sections.forEach(s => observer.observe(s));

  // Close sidebar on mobile after clicking link
  sidebarLinks.forEach(link => {
    link.addEventListener('click', () => {
      if (isMobile()) {
        sidebarOpen = false;
        updateLayout();
      }
    });
  });

  // Scroll to top button
  window.addEventListener('scroll', () => {
    scrollTopBtn.classList.toggle('visible', window.scrollY > 400);
  });