Fix navbar dropdown click-to-toggle behavior

t-173·WorkTask·
·
·
·Omni/Jr.hs
Created3 months ago·Updated3 months ago

Description

Edit

Problem

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 }

Solution

Add JavaScript click toggle alongside existing hover behavior.

JavaScript

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');
      });
    }
  });
});

CSS Changes

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)

Files to Modify

1. Omni/Jr/Web.hs:

  • Add navbarDropdownJs text block
  • Include in pageHead script tag

2. Omni/Jr/Web/Style.hs:

  • Add .navbar-dropdown.open > .navbar-dropdown-content rule

Testing

1. 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

Timeline (0)

No activity yet.