From f4fa6376350c3db77b41d63162de1a543b36ae10 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Wed, 29 Oct 2025 15:41:17 +1300
Subject: [PATCH] fix: language selector now works on all pages

- Added 'navbarReady' event dispatch from navbar after rendering
- Language selector now waits for navbar container to exist
- Fixes race condition where language selector ran before navbar rendered
- Language toggle now functional on researcher, implementer, leader, about pages
---
 public/js/components/language-selector.js | 16 +++++++++++++---
 public/js/components/navbar.js            |  5 ++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/public/js/components/language-selector.js b/public/js/components/language-selector.js
index 434426df..0987bae5 100644
--- a/public/js/components/language-selector.js
+++ b/public/js/components/language-selector.js
@@ -67,11 +67,21 @@
     });
   }
 
-  // Initialize when DOM is ready
+  // Initialize when navbar is ready (not just DOM ready)
+  function initWhenReady() {
+    // Check if navbar container exists
+    if (document.getElementById('language-selector-container')) {
+      createLanguageSelector();
+    } else {
+      // Wait for navbar to signal it's ready
+      window.addEventListener('navbarReady', createLanguageSelector, { once: true });
+    }
+  }
+
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', createLanguageSelector);
+    document.addEventListener('DOMContentLoaded', initWhenReady);
   } else {
-    createLanguageSelector();
+    initWhenReady();
   }
 
   // Re-initialize when language changes (to update active state)
diff --git a/public/js/components/navbar.js b/public/js/components/navbar.js
index f8fd5e62..5a4de0cb 100644
--- a/public/js/components/navbar.js
+++ b/public/js/components/navbar.js
@@ -13,11 +13,14 @@ class TractatusNavbar {
     this.render();
     this.attachEventListeners();
     this.setActivePageIndicator();
+
+    // Dispatch event to signal navbar is ready
+    window.dispatchEvent(new CustomEvent('navbarReady'));
   }
 
   render() {
     const navHTML = `
-      <nav class="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
+      <nav class="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm" id="tractatus-navbar">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div class="flex justify-between h-16">