at2-webapp-dicta2stream/static/fix-nav.js

// Force hide guest navigation for authenticated users
function fixMobileNavigation() {
  console.log('[FIX-NAV] Running navigation fix...');
  
  // Check if user is authenticated
  const hasAuthCookie = document.cookie.includes('isAuthenticated=true');
  const hasUidCookie = document.cookie.includes('uid=');
  const hasLocalStorageAuth = localStorage.getItem('isAuthenticated') === 'true';
  const hasAuthToken = localStorage.getItem('authToken') !== null;
  const isAuthenticated = hasAuthCookie || hasUidCookie || hasLocalStorageAuth || hasAuthToken;
  
  console.log('[FIX-NAV] Authentication state:', { 
    isAuthenticated,
    hasAuthCookie,
    hasUidCookie,
    hasLocalStorageAuth,
    hasAuthToken
  });
  
  if (isAuthenticated) {
    // Force hide guest navigation with !important styles
    const guestNav = document.getElementById('guest-dashboard');
    if (guestNav) {
      console.log('[FIX-NAV] Hiding guest navigation');
      guestNav.style.cssText = `
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        position: absolute !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        pointer-events: none !important;
      `;
      guestNav.classList.add('force-hidden');
    }
    
    // Ensure user navigation is visible with !important styles
    const userNav = document.getElementById('user-dashboard');
    if (userNav) {
      console.log('[FIX-NAV] Showing user navigation');
      userNav.style.cssText = `
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        position: relative !important;
        clip: auto !important;
        pointer-events: auto !important;
      `;
      userNav.classList.add('force-visible');
    }
    
    // Add authenticated class to body
    document.body.classList.add('authenticated');
    document.body.classList.remove('guest-mode');
    
    // Prevent default behavior of nav links that might cause page reloads
    document.querySelectorAll('a[href^="#"]').forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        const targetId = link.getAttribute('href');
        if (targetId && targetId !== '#') {
          // Use history API to update URL without full page reload
          history.pushState(null, '', targetId);
          // Dispatch a custom event that other scripts can listen for
          window.dispatchEvent(new CustomEvent('hashchange'));
          // Force re-apply our navigation fix
          setTimeout(fixMobileNavigation, 0);
        }
      });
    });
  } else {
    // User is not authenticated - ensure guest nav is visible
    const guestNav = document.getElementById('guest-dashboard');
    if (guestNav) {
      guestNav.style.cssText = ''; // Reset any inline styles
    }
    document.body.classList.remove('authenticated');
    document.body.classList.add('guest-mode');
  }
}

// Run on page load
document.addEventListener('DOMContentLoaded', fixMobileNavigation);

// Also run after a short delay to catch any dynamic content
setTimeout(fixMobileNavigation, 100);
setTimeout(fixMobileNavigation, 300);
setTimeout(fixMobileNavigation, 1000);

// Listen for hash changes (navigation)
window.addEventListener('hashchange', fixMobileNavigation);

// Listen for pushState/replaceState (SPA navigation)
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;

history.pushState = function() {
  originalPushState.apply(this, arguments);
  setTimeout(fixMobileNavigation, 0);
};

history.replaceState = function() {
  originalReplaceState.apply(this, arguments);
  setTimeout(fixMobileNavigation, 0);
};

// Run on any DOM mutations (for dynamically loaded content)
const observer = new MutationObserver((mutations) => {
  let shouldFix = false;
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length || mutation.removedNodes.length) {
      shouldFix = true;
    }
  });
  if (shouldFix) {
    setTimeout(fixMobileNavigation, 0);
  }
});

observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['class', 'style', 'id']
});

// Export for debugging
window.fixMobileNavigation = fixMobileNavigation;