38 lines
1.4 KiB
JavaScript
38 lines
1.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const conversationItems = document.querySelectorAll('.ch-item');
|
|
const chatHeaderName = document.getElementById('chat-header-name');
|
|
const chatHeaderImg = document.getElementById('chat-header-img');
|
|
|
|
conversationItems.forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
// Remove active class from all items
|
|
conversationItems.forEach(i => i.classList.remove('active'));
|
|
|
|
// Add active class to the clicked item
|
|
this.classList.add('active');
|
|
|
|
// Update chat header
|
|
const name = this.dataset.name;
|
|
const imgSrc = this.dataset.img;
|
|
|
|
if (chatHeaderName) {
|
|
chatHeaderName.textContent = name;
|
|
}
|
|
if (chatHeaderImg) {
|
|
chatHeaderImg.src = imgSrc;
|
|
}
|
|
|
|
// On mobile, this would also trigger showing the chat pane
|
|
document.querySelector('.chat-container').classList.add('show-chat');
|
|
});
|
|
});
|
|
|
|
// Example of how to go back on mobile (you'd need a back button in the chat header)
|
|
// const backButton = document.getElementById('back-to-conversations');
|
|
// if(backButton) {
|
|
// backButton.addEventListener('click', () => {
|
|
// document.querySelector('.chat-container').classList.remove('show-chat');
|
|
// });
|
|
// }
|
|
});
|