class CustomSidebar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
}
// Add methods dynamically since shadow DOM doesn't allow direct access from parent
connectedCallback() {
setTimeout(() => {
const navItems = this.shadowRoot.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.addEventListener('click', function(e) {
if (this.getAttribute('href').startsWith('/')) {
e.preventDefault();
// Navigate to new page (SPA style)
window.history.pushState({}, '', this.getAttribute('href'));
updateActiveNavItem(this);
}
});
});
const historyItems = this.shadowRoot.querySelectorAll('.history-item');
historyItems.forEach(item => {
item.addEventListener('click', function() {
loadChatHistory(this.textContent);
});
});
}, 0);
}
}
function updateActiveNavItem(activeItem) {
document.querySelectorAll('custom-sidebar').forEach(sidebar => {
const navItems = sidebar.shadowRoot.querySelectorAll('.nav-item');
navItems.forEach(item => item.classList.remove('active'));
});
activeItem.classList.add('active');
}
function startNewChat() {
clearChat();
}
function loadChatHistory(topic) {
// Load specific chat history
console.log('Loading chat history for:', topic);
}
function toggleMobileSidebar() {
const sidebar = document.querySelector('custom-sidebar');
if (sidebar) {
sidebar.shadowRoot.querySelector('.sidebar').classList.toggle('active');
}
}
customElements.define('custom-sidebar', CustomSidebar);