class MobileNav extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Add click handlers for navigation
const navItems = this.shadowRoot.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.addEventListener('click', () => {
// Remove active class from all items
navItems.forEach(navItem => navItem.classList.remove('active'));
// Add active class to clicked item
item.classList.add('active');
// Navigate to page (placeholder for actual navigation logic)
const page = item.dataset.page;
console.log(`Navigating to ${page}`);
});
});
}
}
customElements.define('mobile-nav', MobileNav);