commit 5b8b5052294c9ac0d43388e6aaa916a3a6ea4637
Author: Ben Sima <ben@bensima.com>
Date: Sat Nov 29 18:48:29 2025
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
diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs
index 2f8e693f..e73b550e 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 49f7976b..0432cae0 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)