From 4e158f9e969611ba92cce0e7960cf8e0c9ae8d80 Mon Sep 17 00:00:00 2001
From: A R R R Associates <admin@arrrassociates.com>
Date: Sat, 11 Jul 2026 06:59:58 +0530
Subject: [PATCH] Add auto-close behavior to System Admin dropdowns

---
 .../system_admin_navigation_v2.html           | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/app/ui/templates/components/system_admin_navigation_v2.html b/app/ui/templates/components/system_admin_navigation_v2.html
index 058e504..d19d826 100644
--- a/app/ui/templates/components/system_admin_navigation_v2.html
+++ b/app/ui/templates/components/system_admin_navigation_v2.html
@@ -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>