Services horizontal mega-menu

Task #11: Rework the EHSAN header "خدماتنا" (Services) menu from a narrow
vertical radix dropdown into a full-width horizontal mega-menu, matching the
real ehsan.sa layout where services span the width as icon-above-label columns.

Changes (artifacts/ehsan-poc/src/components/layout/Header.tsx):
- Removed the radix DropdownMenu for services; replaced with a custom
  state-controlled panel (servicesOpen) absolutely positioned full-width
  below the sticky header (header set to relative; panel inset-x-0 top-full).
- Eight services render in a single horizontal flex row, each as an icon
  stacked above its label, with direction-aware vertical dividers (border-s
  on non-first items) so RTL/LTR both read correctly.
- "طلب دعم" kept as a distinct trailing column (subtle bg) routing to /request.
- Dismissal: outside-click (document mousedown + ref containment), Escape key,
  selecting an item, and mouse-leaving the panel. Trigger is click-to-toggle.
- Accessibility: trigger has aria-haspopup/aria-controls/aria-expanded; panel
  has id="services-megamenu" and role="menu".

Deviation: dropped trigger hover-to-open (kept click-toggle) because a
mouseenter+click race closed the panel immediately under Playwright; click
toggle is predictable. Mobile services list (vertical) intentionally unchanged.

Verified: tsc --noEmit clean; e2e UI test passed (open, horizontal layout with
all 8 services + request, Escape closes, click navigates to /opportunities and
closes); console clean; architect review Pass. No emojis.

This commit is contained in:

Replit Agent

2026-06-05 18:45:04 +00:00

parent 0e7b85d88e

commit 0884652f97

2 changed files with 90 additions and 42 deletions

artifacts/ehsan-poc/public/opengraph.jpg

BIN

View File

Binary file not shown.

Before

Width: | Height: | Size: 41 KiB

After

Width: | Height: | Size: 64 KiB