Navbar "Tasks" dropdown opens on hover but clicking doesn't toggle it closed. Users expect click-to-toggle behavior, especially on touch devices.
Current implementation (CSS-only):
.navbar-dropdown:hover > .navbar-dropdown-content { display: block }
Add JavaScript click toggle alongside existing hover behavior.
Add to pageHead alongside existing statusDropdownJs:
// Navbar dropdown toggle
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');
// Close all dropdowns first
document.querySelectorAll('.navbar-dropdown.open').forEach(function(d) {
d.classList.remove('open');
});
// Toggle this one
if (!isOpen) {
dropdown.classList.add('open');
}
});
});
// Close on click outside
document.addEventListener('click', function(e) {
if (!e.target.closest('.navbar-dropdown')) {
document.querySelectorAll('.navbar-dropdown.open').forEach(function(d) {
d.classList.remove('open');
});
}
});
});
Add to navigationStyles:
-- Click-based open state (works with JS toggle)
".navbar-dropdown.open" |> ".navbar-dropdown-content" ? display block
This means the dropdown shows when:
.navbar-dropdown:hover (existing CSS hover).navbar-dropdown.open (new JS click toggle)1. Omni/Jr/Web.hs:
navbarDropdownJs text blockpageHead script tag2. Omni/Jr/Web/Style.hs:
.navbar-dropdown.open > .navbar-dropdown-content rule1. Hover over "Tasks" - dropdown opens 2. Move mouse away - dropdown closes 3. Click "Tasks" - dropdown opens 4. Click "Tasks" again - dropdown closes 5. Click "Tasks" to open, click outside - dropdown closes 6. Click "Tasks" to open, click a menu item - navigates correctly 7. Test on mobile/touch device
No activity yet.