class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Update active link based on current page
setTimeout(() => {
const currentPath = window.location.pathname;
const links = this.shadowRoot.querySelectorAll('a');
links.forEach(link => {
if (link.getAttribute('href') === currentPath ||
(currentPath === '/' && link.getAttribute('href') === '/')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}, 100);
}
}
customElements.define('custom-navbar', CustomNavbar);