class SidebarComponent extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
CG
CodeGenius
Workspace Rosalinda
`;
// Initialize feather icons
const featherScript = document.createElement('script');
featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
this.shadowRoot.appendChild(featherScript);
featherScript.onload = () => {
feather.replace();
};
// Navigation
this.shadowRoot.querySelectorAll('[data-view]').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const view = link.getAttribute('data-view');
document.dispatchEvent(new CustomEvent('navigate', { detail: view }));
// Update active state
this.shadowRoot.querySelectorAll('.nav-button').forEach(btn => {
btn.classList.remove('active');
});
link.classList.add('active');
});
});
// Toggle sidebar on mobile
this.shadowRoot.getElementById('sidebar-toggle').addEventListener('click', () => {
this.classList.remove('open');
document.body.classList.remove('overflow-hidden');
});
}
}
customElements.define('sidebar-component', SidebarComponent);