generated from tonytins/frontpage25
83 lines
2.1 KiB
JavaScript
83 lines
2.1 KiB
JavaScript
// 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);
|
|
});
|