Mobile UX: Full-Screen Left Navigation Drawer vs Semi-Transparent Right Outline Drawer

[CindyLyu1953]

Currently, we have implemented two different drawer styles for mobile:

1. Left Menu (Full-screen overlay)

• Behavior: Completely covers the content when opened
• Background: Solid, no transparency
• Implementation:
  • width: 100%
  • z-index: 100
  • Transparent backdrop (z-index: 99)

2. Right Outline (Semi-transparent with backdrop blur)

• Behavior: Partially covers content (80% width)
• Background: Semi-transparent with blurred backdrop
• Implementation:
  • Ant Design Drawer component
  • width: 80%
  • Native drawer backdrop with blur effect

Which approach provides better UX for mobile users?