Add auto-close behavior to System Admin dropdowns

2026-07-11 06:59:58 +05:30
parent 79eb45c675
commit 4e158f9e96
1 changed files with 79 additions and 0 deletions
@@ -103,3 +103,82 @@
  {% include "ui/templates/components/navigation_v2.html" %}
  {% include "ui/templates/components/mobile_navigation_v2.html" %}
 </div>
+
+{#
+  UI/UX V2 Phase 1F.2 — desktop dropdown interaction compatibility.
+  This affects only the System Admin desktop navigation rendered above.
+  Existing links, routes, active states and mobile navigation remain unchanged.
+#}
+<script>
+(function () {
+  "use strict";
+
+  function initialiseSystemAdminDropdowns() {
+    var root = document.querySelector('[data-uiux-v2-pilot="system-admin"]');
+    if (!root || root.dataset.dropdownAutoCloseInitialised === "true") {
+      return;
+    }
+
+    var desktopNav = root.querySelector('nav[data-uiux-v2="desktop-navigation"]');
+    if (!desktopNav) {
+      return;
+    }
+
+    root.dataset.dropdownAutoCloseInitialised = "true";
+
+    function openDropdowns() {
+      return Array.prototype.slice.call(
+        desktopNav.querySelectorAll('details[open]')
+      );
+    }
+
+    function closeDropdown(details) {
+      if (details && details.open) {
+        details.open = false;
+      }
+    }
+
+    function closeAllExcept(exception) {
+      openDropdowns().forEach(function (details) {
+        if (details !== exception) {
+          closeDropdown(details);
+        }
+      });
+    }
+
+    desktopNav.querySelectorAll('details').forEach(function (details) {
+      details.addEventListener('toggle', function () {
+        if (details.open) {
+          closeAllExcept(details);
+        }
+      });
+
+      details.querySelectorAll('a[href]').forEach(function (link) {
+        link.addEventListener('click', function () {
+          closeDropdown(details);
+        });
+      });
+    });
+
+    document.addEventListener('click', function (event) {
+      openDropdowns().forEach(function (details) {
+        if (!details.contains(event.target)) {
+          closeDropdown(details);
+        }
+      });
+    });
+
+    document.addEventListener('keydown', function (event) {
+      if (event.key === 'Escape') {
+        closeAllExcept(null);
+      }
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initialiseSystemAdminDropdowns, { once: true });
+  } else {
+    initialiseSystemAdminDropdowns();
+  }
+})();
+</script>