Loading SuperChat...
// Update sidebar navigation to use proper links document.addEventListener('DOMContentLoaded', function() { console.log('🔗 Updating sidebar navigation links...'); // Navigation mapping const navigationMap = { 'Chats': { href: 'index.html', title: 'Chat' }, 'Status': { href: 'status.html', title: 'Status' }, 'Calls': { href: 'calls.html', title: 'Voice/Video Call' }, 'Payments': { href: 'payment.html', title: 'Payment' }, 'Business': { href: 'business.html', title: 'Business' }, 'AI Assistant': { href: 'ai-assistant.html', title: 'AI Assistant' }, 'Screen Sharing': { href: 'meeting.html', title: 'Meeting/Screen' }, 'Nearby': { href: 'nearby.html', title: 'Nearby' }, 'Profile': { href: 'profile.html', title: 'Profile' } }; // Add missing navigation items const sidebarContainer = document.querySelector('.sidebar-container') || document.querySelector('.sidebar'); if (sidebarContainer) { // Find existing buttons and convert to links const sidebarButtons = sidebarContainer.querySelectorAll('.sidebar-icon'); sidebarButtons.forEach(button => { const title = button.getAttribute('title'); const mapping = navigationMap[title]; if (mapping && button.tagName === 'BUTTON') { // Create new link element const link = document.createElement('a'); link.href = mapping.href; link.className = button.className; link.title = mapping.title; link.style.cssText = button.style.cssText + '; text-decoration: none; display: flex; align-items: center; justify-content: center; position: relative;'; link.innerHTML = button.innerHTML; // Replace button with link button.parentNode.replaceChild(link, button); console.log(`✅ Updated ${title} to link to ${mapping.href}`); } }); // Add missing navigation items if they don't exist const existingTitles = Array.from(sidebarContainer.querySelectorAll('.sidebar-icon')).map(el => el.title); const missingItems = [ { href: 'billing.html', title: 'Billing', icon: '📄', style: 'background:#2196F3; color:#fff;' }, { href: 'notifications.html', title: 'Notifications', icon: '🔔', style: 'background:#FF6B35; color:#fff;', badge: '12' }, { href: 'help.html', title: 'Help', icon: '❓', style: 'background:#6B7280; color:#fff;' }, { href: 'settings.html', title: 'Settings', icon: '⚙️', style: 'background:#6B7280; color:#fff;' } ]; missingItems.forEach(item => { if (!existingTitles.includes(item.title)) { const link = document.createElement('a'); link.href = item.href; link.className = 'sidebar-icon'; link.title = item.title; link.style.cssText = item.style + '; text-decoration: none; display: flex; align-items: center; justify-content: center; position: relative; width: 48px; height: 48px; border-radius: 12px; margin-bottom: 8px; transition: all 0.3s ease; cursor: pointer;'; let innerHTML = item.icon; if (item.badge) { innerHTML += `${item.badge}`; } link.innerHTML = innerHTML; // Insert before profile button or at the end const profileBtn = sidebarContainer.querySelector('[title="Profile"]'); if (profileBtn) { sidebarContainer.insertBefore(link, profileBtn); } else { sidebarContainer.appendChild(link); } console.log(`✅ Added ${item.title} navigation link`); } }); } console.log('✅ Sidebar navigation links updated successfully!'); }); // Enhanced Navigation Links Setup for index.html document.addEventListener('DOMContentLoaded', function() { console.log('🔗 Setting up comprehensive navigation links...'); // Complete navigation mapping const navigationLinks = { 'Chat': { href: 'index.html', active: true }, 'Chats': { href: 'index.html', active: true }, 'Status': { href: 'status.html' }, 'Voice/Video Call': { href: 'calls.html' }, 'Calls': { href: 'calls.html' }, 'Business': { href: 'business.html' }, 'Payment': { href: 'payment.html' }, 'Payments': { href: 'payment.html' }, 'Billing': { href: 'billing.html' }, 'Meeting/Screen': { href: 'meeting.html' }, 'Screen Sharing': { href: 'meeting.html' }, 'AI Assistant': { href: 'ai-assistant.html' }, 'Nearby': { href: 'nearby.html' }, 'Notifications': { href: 'notifications.html' }, 'Help': { href: 'help.html' }, 'Profile': { href: 'profile.html' }, 'Settings': { href: 'settings.html' } }; // Function to convert button to link function convertToLink(element, href, title) { if (element.tagName === 'BUTTON') { const link = document.createElement('a'); link.href = href; link.className = element.className; link.title = title || element.title; link.innerHTML = element.innerHTML; // Copy all styles link.style.cssText = element.style.cssText + '; text-decoration: none; color: inherit;'; // Replace button with link element.parentNode.replaceChild(link, element); console.log(`✅ Converted ${title} button to link: ${href}`); return link; } return element; } // Find and update all sidebar navigation elements const sidebarElements = document.querySelectorAll('.sidebar-icon, [onclick*="switchTab"], [onclick*="showProfile"]'); sidebarElements.forEach(element => { const title = element.title || element.getAttribute('title'); const onclick = element.getAttribute('onclick'); // Check if this element needs to be converted to a link if (navigationLinks[title]) { convertToLink(element, navigationLinks[title].href, title); } else if (onclick) { // Handle onclick-based navigation if (onclick.includes("switchTab('chats'")) { convertToLink(element, 'index.html', 'Chat'); } else if (onclick.includes("switchTab('status'")) { convertToLink(element, 'status.html', 'Status'); } else if (onclick.includes("switchTab('calls'")) { convertToLink(element, 'calls.html', 'Voice/Video Call'); } else if (onclick.includes("switchTab('business'")) { convertToLink(element, 'business.html', 'Business'); } else if (onclick.includes("switchTab('payments'")) { convertToLink(element, 'payment.html', 'Payment'); } else if (onclick.includes("switchTab('ai'")) { convertToLink(element, 'ai-assistant.html', 'AI Assistant'); } else if (onclick.includes("showProfile")) { convertToLink(element, 'profile.html', 'Profile'); } else if (onclick.includes("openNearbyModal")) { convertToLink(element, 'nearby.html', 'Nearby'); } else if (onclick.includes("startRealScreenShare")) { convertToLink(element, 'meeting.html', 'Meeting/Screen'); } } }); // Add any missing navigation items const sidebar = document.querySelector('.sidebar') || document.querySelector('[class*="sidebar"]'); if (sidebar) { const existingLinks = Array.from(sidebar.querySelectorAll('a, button')).map(el => el.title || el.getAttribute('title')); const requiredItems = [ { title: 'Status', href: 'status.html', icon: '📱', badge: '2', style: 'background:#7C3AED; color:#fff;' }, { title: 'Voice/Video Call', href: 'calls.html', icon: '📞', style: 'background:#FFD600; color:#23272f;' }, { title: 'Business', href: 'business.html', icon: '🏪', badge: '5', style: 'background:#FFD600; color:#23272f;' }, { title: 'Payment', href: 'payment.html', icon: '💳', style: 'background:#00C853; color:#fff;' }, { title: 'Billing', href: 'billing.html', icon: '📄', style: 'background:#2196F3; color:#fff;' }, { title: 'Meeting/Screen', href: 'meeting.html', icon: '🖥️', style: 'background:#FF6B35; color:#fff;' }, { title: 'AI Assistant', href: 'ai-assistant.html', icon: '🤖', style: 'background:#7C3AED; color:#fff;' }, { title: 'Nearby', href: 'nearby.html', icon: '🗺️', style: 'background:#2196F3; color:#fff;' }, { title: 'Notifications', href: 'notifications.html', icon: '🔔', badge: '12', style: 'background:#FF6B35; color:#fff;' }, { title: 'Help', href: 'help.html', icon: '❓', style: 'background:#6B7280; color:#fff;' } ]; requiredItems.forEach(item => { if (!existingLinks.includes(item.title)) { const link = document.createElement('a'); link.href = item.href; link.className = 'sidebar-icon'; link.title = item.title; link.style.cssText = `${item.style}; text-decoration: none; display: flex; align-items: center; justify-content: center; position: relative; width: 48px; height: 48px; border-radius: 12px; margin-bottom: 8px; transition: all 0.3s ease; cursor: pointer;`; let innerHTML = item.icon; if (item.badge) { innerHTML += `${item.badge}`; } link.innerHTML = innerHTML; // Find appropriate insertion point const profileBtn = sidebar.querySelector('[title="Profile"]') || sidebar.querySelector('[onclick*="showProfile"]'); if (profileBtn) { sidebar.insertBefore(link, profileBtn); } else { sidebar.appendChild(link); } console.log(`✅ Added missing navigation: ${item.title} → ${item.href}`); } }); } // Add logout functionality - Use auth guard const logoutElements = document.querySelectorAll('[onclick*="logout"], [href*="logout"]'); logoutElements.forEach(element => { element.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); // Use the auth guard logout function if (window.SuperChatAuth && window.SuperChatAuth.logout) { window.SuperChatAuth.logout(); } else { // Fallback if auth guard not available if (confirm('🚪 Are you sure you want to logout?')) { localStorage.clear(); sessionStorage.clear(); window.location.href = '../login.html'; } } return false; }); }); console.log('✅ All navigation links have been set up successfully!'); console.log('📋 Available pages:', Object.values(navigationLinks).map(item => item.href).filter((v, i, a) => a.indexOf(v) === i)); });