Skip to main content
AI App Builder
Builder
Features
Models
Export
Get Started
Open main menu
Builder
Create web apps with AI-powered generation
Prompt Input
Generate App
App Preview
Preview
Code
s.id) }); // Hide all sections allSections.forEach(section => { section.style.display = 'none'; }); // Show the requested section const targetSection = document.getElementById(sectionId); if (targetSection) { debugLog('Target section found', { id: sectionId }); targetSection.style.display = 'block'; } else { debugLog('Target section not found', { id: sectionId }); // If section not found and there are sections, show the first one if (allSections.length > 0) { const firstSection = allSections[0]; debugLog('Showing first section instead', { id: firstSection.id }); firstSection.style.display = 'block'; } } // Update active states in any navigation updateNavActiveStates(sectionId); } // Function to update active states in navigation elements function updateNavActiveStates(activeSectionId) { debugLog('Updating nav states', { activeSectionId }); // Find all navigation links const navLinks = document.querySelectorAll('a[href^="#"]'); debugLog('Found nav links', { count: navLinks.length, hrefs: Array.from(navLinks).map(link => link.getAttribute('href')) }); // Remove active classes from all links navLinks.forEach(link => { const linkSectionId = link.getAttribute('href').substring(1); if (!linkSectionId) return; debugLog('Processing link', { href: link.getAttribute('href'), currentClasses: link.className }); // Handle desktop and mobile navigation links link.classList.remove('bg-gray-700', 'text-white', 'bg-blue-50', 'text-blue-600'); if (link.closest('nav')) { if (link.closest('.bg-gray-800') || link.closest('.text-gray-300')) { link.classList.add('text-gray-300'); } } }); // Add active classes to matching links navLinks.forEach(link => { const linkTarget = link.getAttribute('href').substring(1); if (linkTarget === activeSectionId) { debugLog('Activating link', { href: link.getAttribute('href'), context: link.closest('.bg-gray-800') ? 'sidebar' : link.closest('#mobile-menu') ? 'mobile' : 'default' }); if (link.closest('.bg-gray-800') || link.closest('nav')) { link.classList.add('bg-gray-700', 'text-white'); } else if (link.closest('#mobile-menu')) { link.classList.add('bg-gray-700', 'text-white'); } else { link.classList.add('text-blue-600'); } } }); } // Handle hash changes window.addEventListener('hashchange', function() { const hash = window.location.hash.substring(1); debugLog('Hash changed', { hash }); if (hash) { showSection(hash); } }); // Handle initial page load function handleInitialLoad() { debugLog('Handling initial load'); const hash = window.location.hash.substring(1); debugLog('Initial hash', { hash }); if (hash) { showSection(hash); } else { const sections = document.querySelectorAll('main section'); debugLog('No hash found, searching for default section', { totalSections: sections.length }); if (sections.length > 0) { const dashboardSection = document.getElementById('dashboard'); if (dashboardSection) { debugLog('Found dashboard section', { id: 'dashboard' }); showSection('dashboard'); if (history.replaceState) { history.replaceState(null, null, '#dashboard'); } else { window.location.hash = 'dashboard'; } } else { const firstSectionId = sections[0].id; if (firstSectionId) { debugLog('Using first section', { id: firstSectionId }); showSection(firstSectionId); if (history.replaceState) { history.replaceState(null, null, '#' + firstSectionId); } else { window.location.hash = firstSectionId; } } } } } } // Set up delegation for navigation clicks document.addEventListener('click', function(event) { let targetElement = event.target.closest('a'); if (targetElement && targetElement.getAttribute('href') && targetElement.getAttribute('href').startsWith('#')) { const sectionId = targetElement.getAttribute('href').substring(1); debugLog('Navigation click', { href: targetElement.getAttribute('href'), sectionId }); if (sectionId) { const targetSection = document.getElementById(sectionId); if (targetSection) { event.preventDefault(); window.location.hash = sectionId; showSection(sectionId); } else { debugLog('Target section not found for click', { sectionId }); } } } }); // Initial setup debugLog('Starting initial setup'); const allSections = document.querySelectorAll('main section'); debugLog('Initial sections state', { totalSections: allSections.length, sectionIds: Array.from(allSections).map(s => s.id) }); allSections.forEach((section, index) => { section.style.display = index === 0 ? 'block' : 'none'; debugLog('Setting initial section visibility', { id: section.id, index, display: index === 0 ? 'block' : 'none' }); }); handleInitialLoad();