// views/header/headerLoader.js
(function () {
"use strict";
// Configuration
const CONFIG = {
insertPosition: "afterbegin",
containerSelector: "body",
activeClass: "active",
version: "1.1",
};
// Header HTML inlined — không cần fetch file nữa
const headerHTML = `
`;
const styles = `
`;
// Inject header directly (no fetch needed)
function loadHeader() {
// Inject styles if not already present
if (!document.getElementById("header-component-styles")) {
document.head.insertAdjacentHTML("beforeend", styles);
}
// Insert header HTML inline
const container = document.querySelector(CONFIG.containerSelector);
container.insertAdjacentHTML(CONFIG.insertPosition, headerHTML);
// Highlight active link
highlightActiveLink();
console.log("✅ Header component loaded v" + CONFIG.version);
}
// Highlight current page link
function highlightActiveLink() {
const currentPath = window.location.pathname;
const links = document.querySelectorAll(".nav-link");
links.forEach((link) => {
const href = link.getAttribute("href");
// Check if current path matches
if (
currentPath === href ||
(href !== "/" && currentPath.startsWith(href))
) {
link.classList.add(CONFIG.activeClass);
}
// Special case for root
if (currentPath === "/" && href === "/transcription") {
link.classList.add(CONFIG.activeClass);
}
});
}
// Initialize when DOM is ready
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", loadHeader);
} else {
loadHeader();
}
})();