class CustomSidebar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Add click handlers for navigation items
const navItems = this.shadowRoot.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.addEventListener('click', function() {
// Remove active class from all items
navItems.forEach(navItem => {
navItem.classList.remove('active');
});
// Add active class to clicked item
this.classList.add('active');
});
});
// Add click handlers for dropdown menus
const dropdownButtons = this.shadowRoot.querySelectorAll('.relative > button');
dropdownButtons.forEach(button => {
button.addEventListener('click', function() {
const submenu = this.nextElementSibling;
const icon = this.querySelector('i:last-child');
submenu.classList.toggle('open');
icon.classList.toggle('rotate-180');
});
});
// Mobile menu toggle
const mobileMenuButton = this.shadowRoot.querySelector('button.md\\:hidden');
if (mobileMenuButton) {
mobileMenuButton.addEventListener('click', () => {
this.shadowRoot.querySelector('.sidebar').classList.toggle('open');
});
}
}
}
customElements.define('custom-sidebar', CustomSidebar);