class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Load Feather icons
const script = document.createElement('script');
script.src = "https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js";
script.onload = () => {
setTimeout(() => {
if (this.shadowRoot) {
window.feather.replace();
}
}, 100);
};
this.shadowRoot.appendChild(script);
}
// Helper method to update active link
updateActiveLink() {
setTimeout(() => {
const currentPath = window.location.pathname;
const navLinks = this.shadowRoot.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.classList.remove('active');
const href = link.getAttribute('href');
if (
(href === '/' && currentPath === '/') ||
(href !== '/' && currentPath.startsWith(href))
) {
link.classList.add('active');
}
});
}, 150);
}
}
// Lifecycle method called when the element is added to the document
customElements.whenDefined('custom-navbar').then(() => {
const navbar = document.querySelector('custom-navbar');
if (navbar) {
navbar.updateActiveLink();
}
});
customElements.define('custom-navbar', CustomNavbar);