redux-scraper/backlog/tasks/task-76 - Fix-dual-menu-visibility-on-desktop.md

id, title, status, assignee, created_date, updated_date, labels, dependencies

id	title	status	assignee	created_date	updated_date	labels	dependencies
task-76	Fix dual menu visibility on desktop	Done	@assistant	2025-07-30	2025-07-30

Description

Both the UserMenu dropdown and hamburger menu were showing on desktop screens simultaneously, creating confusing UX. Need to ensure hamburger menu is only visible on mobile.

Acceptance Criteria

• Hamburger menu is never visible on desktop screens
• UserMenu dropdown works properly on desktop
• Mobile menu functionality works correctly on mobile devices
• No JavaScript errors in console
• Responsive behavior works correctly on screen resize

Implementation Notes

Successfully fixed the dual menu issue on desktop screens.

Root Cause:

• Mobile menu container used 'md:hidden' class which wasn't sufficient to prevent JavaScript from showing the menu on desktop
• JavaScript event handlers weren't screen-size aware, allowing mobile menu interactions on desktop

Fixes Implemented:

1. Enhanced CSS Classes: Changed 'md:hidden' to 'md:!hidden' to force-hide mobile menu on desktop with !important
2. Screen-Size Aware JavaScript: Added window.innerWidth checks (≥768px) to prevent mobile menu interactions on desktop
3. Automatic Cleanup: Added resize event listener to close mobile menu when screen becomes desktop-sized
4. Consistent Event Handling: Updated all mobile menu handlers (click, click-outside, escape key) to only work on mobile screens

Technical Details:

• Mobile menu is now force-hidden on desktop screens using 'md:!hidden' class
• All JavaScript interactions check screen width (768px breakpoint) before executing
• Window resize handler automatically switches between mobile and desktop layouts
• No functionality lost while preventing the dual menu issue

Files Modified:

• app/views/layouts/application.html.erb: Enhanced mobile menu CSS and JavaScript logic

All acceptance criteria met - hamburger menu only shows on mobile, desktop UserMenu works properly, and responsive behavior is correct.