andie/assets/scripts/nav.js

// Top nav
const skipLink = {
	href: "#main",
	title: "skip to main content",
	text: "skip to main content"
}

const homeLink = {
	href: "/",
	title: "home page",
	text: "Firstname Lastname"
}

const navLinks = [
	{
		href: "/one",
		title: "dummy link one",
		text: "nav one"
	},
	{
		href: "/two",
		title: "dummy link two",
		text: "nav two"
	},
	{
		href: "/three",
		title: "dummy link three",
		text: "nav three"
	}
]

const createLink = function(link, currentPath) {
	const a = document.createElement("a");
	a.href = link.href;
	a.title = link.title;
	a.innerHTML = link.text;

	if (link.href === currentPath) a.classList.add("current-page");

	return a;
}

const createSkipLink = function(path) {
	const a = createLink(skipLink, path);
	a.id = "skip";
	return a;
}

const createTitle = function(path) {
	const h2 = document.createElement("h2");
	h2.append(createLink(homeLink, path));
	return h2;
}

const createNavLink = function(link) {
	const li = document.createElement("li");
	li.append(createLink(link));
	return li;
}

const populateNav = function() {
	nav = document.getElementById("top-nav");
	let path = window.location.pathname;

	nav.append(createSkipLink(path));
	nav.append(createTitle(path));

	const ul = document.createElement("ul");
	for (const link of navLinks) ul.append(createNavLink(link, path));
	nav.append(ul);
}

populateNav();

// Footer
const footerHTML = `
	<p>2026</p>
	<p>Firstname Lastname</p>
	<p><a href="/attribution">attribution</a></p>
`

const populateFooter = function() {
	const footer = document.getElementById("footer");
	footer.innerHTML = footerHTML;
}

populateFooter();