class CustomSidebar extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.innerHTML = `
`;
this.setupMobileMenu();
}
setupMobileMenu() {
const menuButton = document.createElement('button');
menuButton.className = 'mobile-menu-trigger';
menuButton.innerHTML = `
`;
menuButton.onclick = () => {
const sidebar = this.shadowRoot.querySelector('.sidebar');
sidebar.classList.toggle('active');
};
document.body.appendChild(menuButton);
}
}
customElements.define('custom-sidebar', CustomSidebar);
// Sidebar functions
function startNewChat() {
clearChat();
}
function loadChatHistory(chatId) {
console.log('Loading chat history for:', chatId);
document.querySelectorAll('.chat-item').forEach(item => {
item.classList.remove('active');
});
const clickedChat = document.querySelector(`.chat-item[data-id="${chatId}"]`);
if (clickedChat) {
clickedChat.classList.add('active');
}
}
function openAccount() {
console.log('Opening account settings...');
}