From 138b00b15a6d124f814f81a3a20e4fb67b1c0cc5 Mon Sep 17 00:00:00 2001
From: Connor Yoh <con.yoh13@gmail.com>
Date: Mon, 14 Apr 2025 14:06:57 +0100
Subject: [PATCH] Language sort feature now works and doesn't throw errors

---
 src/main/resources/static/js/languageSelection.js  | 10 +++++++---
 src/main/resources/templates/fragments/navbar.html |  2 +-
 src/main/resources/templates/login.html            |  2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/main/resources/static/js/languageSelection.js b/src/main/resources/static/js/languageSelection.js
index 2c7e04063..7d4b8bc0c 100644
--- a/src/main/resources/static/js/languageSelection.js
+++ b/src/main/resources/static/js/languageSelection.js
@@ -57,11 +57,15 @@ function initLanguageSettings() {
 
 function sortLanguageDropdown() {
   document.addEventListener('DOMContentLoaded', function () {
-    const dropdownMenu = document.querySelector('.dropdown-menu .dropdown-item.lang_dropdown-item').parentElement;
+    const dropdownMenu = document.getElementById('languageSelection');
     if (dropdownMenu) {
-      const items = Array.from(dropdownMenu.children).filter((child) => child.matches('a'));
+      const items = Array.from(dropdownMenu.children).filter((child) => child.querySelector('a'));
       items
-        .sort((a, b) => a.dataset.bsLanguageCode.localeCompare(b.dataset.bsLanguageCode))
+        .sort((wrapperA, wrapperB) => {
+          const a = wrapperA.querySelector('a');
+          const b = wrapperB.querySelector('a');
+          return a.dataset.bsLanguageCode.localeCompare(b.dataset.bsLanguageCode);
+        })
         .forEach((node) => dropdownMenu.appendChild(node));
     }
   });
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index b338f3f7d..593d8c213 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -143,7 +143,7 @@
             </a>
             <div class="dropdown-menu dropdown-menu-tp" aria-labelledby="languageDropdown">
               <div class="dropdown-menu-wrapper px-xl-2 px-2">
-                <div class="scrollable-y lang_dropdown-mw scalable-languages-container">
+                <div id="languageSelection" class="scrollable-y lang_dropdown-mw scalable-languages-container">
                   <th:block th:insert="~{fragments/languages :: langs}"></th:block>
                 </div>
               </div>
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 0cdd347da..a359b20e3 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -143,7 +143,7 @@
             </button>
             <div class="dropdown-menu" aria-labelledby="languageDropdown">
               <!-- Here's where the fragment will be included -->
-              <div class="scrollable-y">
+              <div id="languageSelection" class="scrollable-y" >
               <th:block th:replace="~{fragments/languages :: langs}"></th:block>
               </div>
             </div>