// Mobile menu toggle
const menuToggle = document.createElement("div");
menuToggle.className = "menu-toggle";
menuToggle.textContent = "☰ Menu";
document.body.insertBefore(menuToggle, document.body.firstChild);

const sidebar = document.getElementById("sidebar");

menuToggle.addEventListener("click", () => {
  sidebar.classList.toggle("active");
});

// Create the menu dynamically
const menuContainer = document.getElementById("sidebar");
const menuData = {
  pages: [
    {
      Name: "home",
      Label: "Home",
      Contents: "content/home.html",
    },
    {
      Name: "about",
      Label: "About",
      Contents: "content/about.html",
    },
    {
      Name: "services",
      Label: "Services",
      Contents: "content/services.html",
    },
    {
      Name: "contact",
      Label: "Contact",
      Contents: "content/contact.html",
    },
  ],
};

// Generate the menu
menuData.pages.forEach((page) => {
  const listContainer = document.createElement("ul");
  const list = document.createElement("li");
  const link = document.createElement("a");
  link.href = `#${page.Name}`;
  link.textContent = page.Label;
  link.addEventListener("click", (e) => {
    e.preventDefault();
    loadPage(page.Name);
  });
  listContainer.appendChild(list);
  list.appendChild(link);
  menuContainer.appendChild(listContainer);
});

// Load the content dynamically
function loadPage(name) {
  const page = menuData.pages.find((p) => p.Name === name);
  if (!page) return;

  fetch(page.Contents)
    .then((response) => response.text())
    .then((html) => {
      document.getElementById("content").innerHTML = html;
    })
    .catch((error) => {
      console.error("Error loading content:", error);
      document.getElementById("content").innerHTML =
        `<p>Failed to load ${page.Label} content.</p>`;
    });
}

// Handle hash changes
window.addEventListener("hashchange", () => {
  const hash = window.location.hash.substring(1) || "home";
  loadPage(hash);
});

// Load the default page
window.addEventListener("load", () => {
  const hash = window.location.hash.substring(1) || "home";
  loadPage(hash);
});