class SideBar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Initialize Feather icons
setTimeout(() => {
if (this.shadowRoot.querySelector('[data-feather]')) {
feather.replace();
}
}, 100);
// Add mobile toggle functionality
this.shadowRoot.getElementById('mobileToggle').addEventListener('click', () => {
const sidebar = this.shadowRoot.getElementById('sidebar');
sidebar.classList.toggle('active');
});
// Close sidebar when clicking outside on mobile
document.addEventListener('click', (e) => {
if (window.innerWidth <= 768) {
const sidebar = this.shadowRoot.getElementById('sidebar');
const toggle = this.shadowRoot.getElementById('mobileToggle');
if (!sidebar.contains(e.target) && !toggle.contains(e.target)) {
sidebar.classList.remove('active');
}
}
});
// Make filterProjects available globally
window.filterProjects = (category) => {
const tags = this.shadowRoot.querySelectorAll('.category-tag');
tags.forEach(tag => tag.classList.remove('active'));
this.shadowRoot.querySelector(`.category-tag[onclick*="${category}"]`).classList.add('active');
// Call the global filter function
if (typeof window.filterProjectsGlobal === 'function') {
window.filterProjectsGlobal(category);
}
};
}
}
customElements.define('side-bar', SideBar);