Off-Canvas Navigation Drawer

Problem Statement

Off-canvas drawers slide in from screen edges (left, right, or bottom) to display navigation directories, filters, or details. While simple, they require optimized execution:

1. Animating layout properties (like width or margin) causes rendering recalculations (reflow/paint) and makes animations feel sluggish.
2. The page backdrop overlay needs to dim the underlying content and handle click-dismissals.
3. Access boundaries must be respected: hidden menu options must not receive keyboard tabs when the drawer is closed.

We need to build a smooth, GPU-accelerated navigation drawer.

Requirements

Functional

• Sliding Mechanics: The drawer must sit hidden off-screen, sliding in smoothly from the edge (support both left and right sides) when toggled.
• Hardware-Accelerated Animation: Use CSS transform (translation) and opacity transitions instead of layout-altering properties to ensure 60fps responsiveness.
• Overlay Backdrop: Render a dark overlay backdrop behind the drawer to dim main content, clicking on which automatically closes the drawer.
• Closed State Isolation: When the drawer is closed, set visibility: hidden or display: none to isolate its content from screen readers and tab trees.

Non-Functional

• Ensure clean transitions on both the backdrop blur/opacity and drawer slide-in coordinates.
• Use TypeScript models for side configurations and actions.

Concepts Tested

• CSS transforms (transform: translateX).
• GPU rendering optimizations (Layout vs Composite stages).
• Drawer visibility and keyboard access toggles.