P1: Hamburger menu does not work on mobile #23

New Issue

Closed

opened 2026-05-13 21:38:29 -05:00 by null · 0 comments

null commented

2026-05-13 21:38:29 -05:00

Owner

Severity: P1 — High

Problem: The hamburger menu button on mobile does not open the slide-out navigation. Tapping it has no visible effect.

Impact: Mobile users cannot navigate the site at all — no access to Services, Industries, About, Contact, or Support pages.

Where: Header.jsx — the mobile menu uses a Radix Sheet (Dialog-based) component. Likely causes:

SheetContent CSS data-[state=open] animations may not fire if Tailwind animate-in/animate-out classes are missing or misconfigured
The SheetOverlay backdrop may be invisible (z-index or opacity issue)
The sheet panel may be rendering off-screen or behind the header (z-index conflict — header is z-40, sheet overlay/content is z-50 but may be clipped)
Possible missing Tailwind animation plugin (tailwindcss-animate) or animation keyframes not generating correctly
The DialogTrigger fix from earlier consolidated the mobile menu into Header.jsx — the state binding or click handler may not be wired correctly

Steps to reproduce:

Open http://localhost:3001 on a mobile viewport (or browser dev tools responsive mode < 768px)
Tap the hamburger icon
Nothing happens — no slide-out, no overlay

Fix:

Verify tailwindcss-animate is installed and configured in tailwind.config
Check that SheetContent renders visible output in DOM when open
Verify z-index stacking (header z-40, sheet z-50)
Test state binding: open={mobileMenuOpen} / onOpenChange={setMobileMenuOpen}
Ensure animations are not being stripped by production build

## Severity: P1 — High **Problem:** The hamburger menu button on mobile does not open the slide-out navigation. Tapping it has no visible effect. **Impact:** Mobile users cannot navigate the site at all — no access to Services, Industries, About, Contact, or Support pages. **Where:** `Header.jsx` — the mobile menu uses a Radix `Sheet` (Dialog-based) component. Likely causes: 1. `SheetContent` CSS `data-[state=open]` animations may not fire if Tailwind `animate-in`/`animate-out` classes are missing or misconfigured 2. The `SheetOverlay` backdrop may be invisible (z-index or opacity issue) 3. The sheet panel may be rendering off-screen or behind the header (z-index conflict — header is `z-40`, sheet overlay/content is `z-50` but may be clipped) 4. Possible missing Tailwind animation plugin (`tailwindcss-animate`) or animation keyframes not generating correctly 5. The `DialogTrigger` fix from earlier consolidated the mobile menu into Header.jsx — the state binding or click handler may not be wired correctly **Steps to reproduce:** 1. Open http://localhost:3001 on a mobile viewport (or browser dev tools responsive mode < 768px) 2. Tap the hamburger icon 3. Nothing happens — no slide-out, no overlay **Fix:** 1. Verify `tailwindcss-animate` is installed and configured in `tailwind.config` 2. Check that `SheetContent` renders visible output in DOM when open 3. Verify z-index stacking (header z-40, sheet z-50) 4. Test state binding: `open={mobileMenuOpen}` / `onOpenChange={setMobileMenuOpen}` 5. Ensure animations are not being stripped by production build