// inject-nav.js - Handles dynamic injection and management of navigation elements import { showOnly } from './router.js'; // Menu state let isMenuOpen = false; // Export the injectNavigation function export function injectNavigation(isAuthenticated = false) { console.log('injectNavigation called with isAuthenticated:', isAuthenticated); const navContainer = document.getElementById('main-navigation'); if (!navContainer) { console.error('Navigation container not found. Looking for #main-navigation'); console.log('Available elements with id:', document.querySelectorAll('[id]')); return; } // Clear existing content navContainer.innerHTML = ''; console.log('Creating navigation...'); try { // Create the navigation wrapper const navWrapper = document.createElement('nav'); navWrapper.className = 'nav-wrapper'; // Create the navigation content const nav = isAuthenticated ? createUserNav() : createGuestNav(); console.log('Navigation HTML created:', nav.outerHTML); // Append navigation to wrapper navWrapper.appendChild(nav); // Append to container navContainer.appendChild(navWrapper); console.log('Navigation appended to container'); // Initialize menu toggle after navigation is injected setupMenuToggle(); // Set up menu links setupMenuLinks(); // Add click handler for the logo to navigate home const logo = document.querySelector('.logo'); if (logo) { logo.addEventListener('click', (e) => { e.preventDefault(); showOnly('welcome'); closeMenu(); }); } } catch (error) { console.error('Error creating navigation:', error); return; } // Set up menu toggle for mobile setupMenuToggle(); // Set up menu links setupMenuLinks(); // Close menu when clicking on a nav link on mobile const navLinks = navContainer.querySelectorAll('.nav-link'); navLinks.forEach(link => { link.addEventListener('click', () => { if (window.innerWidth < 768) { // Mobile breakpoint closeMenu(); } }); }); // Add click handler for the logo to navigate home const logo = document.querySelector('.logo'); if (logo) { logo.addEventListener('click', (e) => { e.preventDefault(); showOnly('welcome'); }); } } // Function to create the guest navigation function createGuestNav() { const nav = document.createElement('div'); nav.className = 'dashboard-nav'; nav.setAttribute('role', 'navigation'); nav.setAttribute('aria-label', 'Main navigation'); const navList = document.createElement('ul'); navList.className = 'nav-list'; const links = [ { id: 'nav-login', target: 'login', text: 'Login / Register' }, { id: 'nav-streams', target: 'streams', text: 'Streams' }, { id: 'nav-welcome', target: 'welcome', text: 'Welcome' } ]; // Create and append links links.forEach((link) => { const li = document.createElement('li'); li.className = 'nav-item'; const a = document.createElement('a'); a.id = link.id; a.href = `#${link.target}`; a.className = 'nav-link'; a.setAttribute('data-target', link.target); a.textContent = link.text; // Add click handler for navigation a.addEventListener('click', (e) => { e.preventDefault(); const target = e.currentTarget.getAttribute('data-target'); if (target) { window.location.hash = target; if (window.router && typeof window.router.showOnly === 'function') { window.router.showOnly(target); } // Close menu on mobile after clicking a link if (window.innerWidth < 768) { closeMenu(); } } }); li.appendChild(a); navList.appendChild(li); }); nav.appendChild(navList); return nav; } function createUserNav() { const nav = document.createElement('div'); nav.className = 'dashboard-nav'; nav.setAttribute('role', 'navigation'); nav.setAttribute('aria-label', 'User navigation'); const navList = document.createElement('ul'); navList.className = 'nav-list'; const links = [ { id: 'user-stream', target: 'your-stream', text: 'Your Stream' }, { id: 'nav-streams', target: 'streams', text: 'Streams' }, { id: 'nav-welcome', target: 'welcome', text: 'Welcome' }, { id: 'user-logout', target: 'logout', text: 'Logout' } ]; // Create and append links links.forEach((link, index) => { const li = document.createElement('li'); li.className = 'nav-item'; const a = document.createElement('a'); a.id = link.id; a.href = '#'; a.className = 'nav-link'; // Special handling for logout if (link.target === 'logout') { a.href = '#'; a.addEventListener('click', async (e) => { e.preventDefault(); closeMenu(); // Use the handleLogout function from dashboard.js if available if (typeof handleLogout === 'function') { await handleLogout(); } else { // Fallback in case handleLogout is not available localStorage.removeItem('user'); localStorage.removeItem('uid'); localStorage.removeItem('uid_time'); localStorage.removeItem('confirmed_uid'); document.cookie = 'uid=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'; window.location.href = '/'; } window.location.href = '#'; // Force reload to reset the app state window.location.reload(); }); } else { a.setAttribute('data-target', link.target); } a.textContent = link.text; li.appendChild(a); navList.appendChild(li); }); nav.appendChild(navList); return nav; } // Set up menu toggle functionality function setupMenuToggle() { const menuToggle = document.querySelector('.menu-toggle'); const navWrapper = document.querySelector('.nav-wrapper'); if (!menuToggle || !navWrapper) return; menuToggle.addEventListener('click', toggleMenu); // Close menu when clicking outside document.addEventListener('click', (e) => { if (isMenuOpen && !navWrapper.contains(e.target) && !menuToggle.contains(e.target)) { closeMenu(); } }); // Close menu on escape key document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isMenuOpen) { closeMenu(); } }); // Close menu when resizing to desktop let resizeTimer; window.addEventListener('resize', () => { if (window.innerWidth >= 768) { closeMenu(); } }); } // Toggle mobile menu function toggleMenu(event) { if (event) { event.preventDefault(); event.stopPropagation(); } const navWrapper = document.querySelector('.nav-wrapper'); const menuToggle = document.querySelector('.menu-toggle'); if (!navWrapper || !menuToggle) return; isMenuOpen = !isMenuOpen; if (isMenuOpen) { // Open menu navWrapper.classList.add('active'); menuToggle.setAttribute('aria-expanded', 'true'); menuToggle.innerHTML = '✕'; document.body.style.overflow = 'hidden'; // Focus the first link in the menu for better keyboard navigation const firstLink = navWrapper.querySelector('a'); if (firstLink) firstLink.focus(); // Add click outside handler document._handleClickOutside = (e) => { if (!navWrapper.contains(e.target) && e.target !== menuToggle) { closeMenu(); } }; document.addEventListener('click', document._handleClickOutside); // Add escape key handler document._handleEscape = (e) => { if (e.key === 'Escape') { closeMenu(); } }; document.addEventListener('keydown', document._handleEscape); } else { closeMenu(); } } // Close menu function function closeMenu() { const navWrapper = document.querySelector('.nav-wrapper'); const menuToggle = document.querySelector('.menu-toggle'); if (!navWrapper || !menuToggle) return; isMenuOpen = false; navWrapper.classList.remove('active'); menuToggle.setAttribute('aria-expanded', 'false'); menuToggle.innerHTML = '☰'; document.body.style.overflow = ''; // Remove event listeners if (document._handleClickOutside) { document.removeEventListener('click', document._handleClickOutside); delete document._handleClickOutside; } if (document._handleEscape) { document.removeEventListener('keydown', document._handleEscape); delete document._handleEscape; } } // Initialize menu toggle on page load function initializeMenuToggle() { console.log('Initializing menu toggle...'); const menuToggle = document.getElementById('menu-toggle'); if (!menuToggle) { console.error('Main menu toggle button not found!'); return; } console.log('Menu toggle button found:', menuToggle); // Remove any existing click listeners const newToggle = menuToggle.cloneNode(true); if (menuToggle.parentNode) { menuToggle.parentNode.replaceChild(newToggle, menuToggle); console.log('Replaced menu toggle button'); } else { console.error('Menu toggle has no parent node!'); return; } // Add click handler to the new toggle newToggle.addEventListener('click', function(event) { console.log('Menu toggle clicked!', event); event.preventDefault(); event.stopPropagation(); toggleMenu(event); return false; }); // Also handle the header menu toggle if it exists const headerMenuToggle = document.getElementById('header-menu-toggle'); if (headerMenuToggle) { console.log('Header menu toggle found, syncing with main menu'); headerMenuToggle.addEventListener('click', function(event) { event.preventDefault(); event.stopPropagation(); newToggle.click(); // Trigger the main menu toggle return false; }); } } // Initialize when DOM is loaded document.addEventListener('DOMContentLoaded', () => { console.log('DOM fully loaded and parsed'); // Initialize navigation based on authentication state // This will be set by the main app after checking auth status if (window.initializeNavigation) { window.initializeNavigation(); } // Initialize menu toggle initializeMenuToggle(); // Also try to initialize after a short delay in case the DOM changes setTimeout(initializeMenuToggle, 500); }); // Navigation injection function export function injectNavigation(isAuthenticated = false) { console.log('Injecting navigation, isAuthenticated:', isAuthenticated); const container = document.getElementById('main-navigation'); const navWrapper = document.querySelector('.nav-wrapper'); if (!container || !navWrapper) { console.error('Navigation elements not found. Looking for #main-navigation and .nav-wrapper'); return null; } try { // Store scroll position const scrollPosition = window.scrollY; // Clear existing navigation container.innerHTML = ''; // Create the appropriate navigation based on authentication status const nav = isAuthenticated ? createUserNav() : createGuestNav(); // Append the navigation to the container container.appendChild(nav); // Set up menu toggle functionality setupMenuToggle(); // Set up navigation links setupMenuLinks(); // Show the appropriate page based on URL if (window.location.hash === '#streams' || window.location.pathname === '/streams') { showOnly('stream-page'); if (typeof window.maybeLoadStreamsOnShow === 'function') { window.maybeLoadStreamsOnShow(); } } else if (!window.location.hash || window.location.hash === '#') { // Show welcome page by default if no hash showOnly('welcome-page'); } // Restore scroll position window.scrollTo(0, scrollPosition); return nav; } catch (error) { console.error('Error injecting navigation:', error); return null; } } // Set up menu links with click handlers function setupMenuLinks() { // Handle navigation link clicks document.addEventListener('click', function(e) { // Check if click is on a nav link or its children let link = e.target.closest('.nav-link'); if (!link) return; const target = link.getAttribute('data-target'); if (target) { e.preventDefault(); console.log('Navigation link clicked:', target); showOnly(target); closeMenu(); // Update active state document.querySelectorAll('.nav-link').forEach(l => { l.classList.remove('active'); }); link.classList.add('active'); } }); } // Make the function available globally for debugging window.injectNavigation = injectNavigation;