Implement full-screen mobile menu with branded theming and close functionality

[Copilot]

Pull Request

Description

Implemented full-screen mobile menu overlay with branded gradient theme, hamburger-to-X icon transformation, and multiple close mechanisms (tap X, tap backdrop, ESC key).

Changes Made

Mobile Menu Enhancement

• Full-screen overlay: Menu now occupies 100vw × 100vh with branded blue gradient (rgba(0,69,120,0.98) → rgba(0,120,212,0.98))
• Icon transformation: Hamburger bars animate to X using CSS transforms when aria-expanded="true"

  .elmentor-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
    transform: rotate(45deg) translate(var(--hamburger-transform-offset), var(--hamburger-transform-offset));
  }

• Backdrop dismissal: Added semi-transparent backdrop (rgba(0,0,0,0.5)) with click handler
• Enhanced typography: Menu items styled with font-size: 2xl, white text, and hover animations (underline + translateX)

Code Quality

• Extracted colors and magic numbers to CSS variables in globals.css:
  • --color-mobile-menu-bg-start/end
  • --color-mobile-menu-backdrop
  • --hamburger-transform-offset
• Fixed backdrop rendering to always mount with state-based class for smooth transitions

Why These Changes Are Needed

Current mobile menu doesn't cover full screen, uses plain white theme mismatched with branding, lacks intuitive close actions, and hamburger icon doesn't transform to indicate active state.

Testing Performed

• Verified on 375px (iPhone SE) and 414px (iPhone 11 Pro Max) viewports
• Confirmed smooth animations for open/close states
• Validated backdrop click-to-dismiss and ESC key functionality
• TypeScript check and build successful
• CodeQL security scan: 0 alerts

Screenshots

Before:

After:

Additional Notes

Accessibility maintained: ARIA labels (aria-expanded, aria-modal, aria-controls) preserved, keyboard navigation functional, screen reader compatible.

Original prompt

User Story: Mobile Menu Overhaul for Full-Screen Behavior and Theming Consistency

Objective:
Implement a new mobile burger menu that behaves as a full-screen overlay and adheres to the application's branding and visual style guidelines. The menu must be dismissible with an intuitive close action and visually consistent with the app's design.

Task Breakdown:

Full-Screen Menu Implementation:

When the user taps the burger menu, expand it to occupy the full width of the screen to improve usability and readability on mobile devices.

Ensure that the menu overlay takes up the full screen, with a solid background that does not interfere with the main content.

Close Action Design:

The burger icon must transform into a close “X” icon in the top-right corner upon activation.

The user should be able to tap the “X” icon to close the menu.

Optionally, implement the ability for users to tap outside the menu to dismiss it, providing an alternative close action.

The menu should close smoothly, ensuring no layout shifts or abrupt transitions.

Theming & Visual Consistency:

Update the mobile menu design to match the existing branding and visual style (e.g., color scheme, fonts, button styles).

The default white theme currently used in the menu should be replaced with the app’s primary theme, ensuring visual coherence across the navigation bar and menu.

Responsiveness Testing:

Test the full-screen menu implementation across a variety of mobile devices and screen sizes to ensure responsive design.

Ensure the menu scales and functions correctly without distortion on devices ranging from small smartphones to larger tablets.

Accessibility:

Ensure the close action (whether through the “X” icon or tapping outside the menu) is accessible and usable, following best practices for mobile accessibility.

The menu should be keyboard-navigable and screen-reader friendly.

Expected Outcome:

The burger menu will provide a clean, full-screen overlay on mobile devices, with an intuitive and easily accessible close action.

The mobile menu will visually align with the app’s branding, offering a cohesive and consistent user experience across all devices.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.