Fix navbar dropdown click-to-toggle behavior

The build passed with no errors. The implementation adds:
1. JavaScript click-toggle handler for navbar dropdowns (closes
all, the 2. Click-outside-to-close behavior 3. CSS rule for
`.navbar-dropdown.open` state to show dropdown content

Task-Id: t-173

2 files changed, 29 insertions, 0 deletions

diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs
index 2f8e693..e73b550 100644
--- a/Omni/Jr/Web.hs
+++ b/Omni/Jr/Web.hs
@@ -260,6 +260,34 @@ pageHead title =
       ]
       ("" :: Text)
     Lucid.script_ [] statusDropdownJs
+    Lucid.script_ [] navbarDropdownJs
+
+navbarDropdownJs :: Text
+navbarDropdownJs =
+  Text.unlines
+    [ "document.addEventListener('DOMContentLoaded', function() {",
+      "  document.querySelectorAll('.navbar-dropdown-btn').forEach(function(btn) {",
+      "    btn.addEventListener('click', function(e) {",
+      "      e.preventDefault();",
+      "      var dropdown = btn.closest('.navbar-dropdown');",
+      "      var isOpen = dropdown.classList.contains('open');",
+      "      document.querySelectorAll('.navbar-dropdown.open').forEach(function(d) {",
+      "        d.classList.remove('open');",
+      "      });",
+      "      if (!isOpen) {",
+      "        dropdown.classList.add('open');",
+      "      }",
+      "    });",
+      "  });",
+      "  document.addEventListener('click', function(e) {",
+      "    if (!e.target.closest('.navbar-dropdown')) {",
+      "      document.querySelectorAll('.navbar-dropdown.open').forEach(function(d) {",
+      "        d.classList.remove('open');",
+      "      });",
+      "    }",
+      "  });",
+      "});"
+    ]
 
 statusDropdownJs :: Text
 statusDropdownJs =
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 49f7976..0432cae 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -225,6 +225,7 @@ navigationStyles = do
     zIndex 100
     Stylesheet.key "overflow" ("hidden" :: Text)
   ".navbar-dropdown" # hover |> ".navbar-dropdown-content" ? display block
+  ".navbar-dropdown.open" |> ".navbar-dropdown-content" ? display block
   ".navbar-dropdown-item" ? do
     display block
     padding (px 8) (px 12) (px 8) (px 12)