class Sidebar extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.render();
}
render() {
this.shadowRoot.innerHTML = `
Core Version
v2.0.15
System Status
Active
`;
// Add click handlers for navigation
const navItems = this.shadowRoot.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.addEventListener('click', (e) => {
navItems.forEach(n => n.classList.remove('active'));
item.classList.add('active');
});
});
}
}
customElements.define('vpn-sidebar', Sidebar);