Initial commit

assets/js/components.js

@@ -0,0 +1,49 @@
+async function loadComponent(id, file) {
+	const el = document.getElementById(id);
+	if (!el) return;
+	const res = await fetch(file);
+	const html = await res.text();
+	el.innerHTML = html;
+}
+
+async function initComponents() {
+	console.log("init");
+	await Promise.all([
+		loadComponent("topbar-placeholder", "components/topbar.html"),
+		loadComponent("navbar-placeholder", "components/navbar.html"),
+		loadComponent("footer-placeholder", "components/footer.html"),
+		loadComponent("toast-placeholder", "components/toast.html"),
+	]);
+
+	// ✅ DOM is fully ready now — safe to run these
+	setActiveNavLink();
+	updateCartCount();
+
+	// ✅ Tell cart.js it can now render
+	document.dispatchEvent(new Event("components:ready"));
+
+	const menuToggle = document.getElementById("menu-toggle");
+	const mobileMenu = document.getElementById("mobile-menu");
+
+	if (!menuToggle || !mobileMenu) return;
+
+	menuToggle.addEventListener("click", () => {
+		mobileMenu.classList.toggle("active");
+	});
+}
+
+function setActiveNavLink() {
+	const page = window.location.pathname.split("/").pop() || "index.html";
+	document.querySelectorAll(".nav-links a").forEach((a) => {
+		a.parentElement.classList.toggle("active", a.getAttribute("href") === page);
+	});
+}
+
+function updateCartCount() {
+	const cart = JSON.parse(localStorage.getItem("cart")) || [];
+	const total = cart.reduce((s, i) => s + i.quantity, 0);
+	const el = document.getElementById("nav-cart-count");
+	if (el) el.textContent = total;
+}
+
+initComponents();