Mobile Nav
Right-side drawer opened from Header's hamburger on narrow viewports. Contains nav links, social icons, and a ThemeToggle. Locks body scroll while open.
Live Preview
The drawer renders outside this preview box via fixed positioning. Open it to inspect the layout.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
isOpen* | boolean | - | Controls visibility. Parent is responsible for state. |
onClose* | () => void | - | Called when the user taps the backdrop or close button. |
links* | { label: string; href: string }[] | - | Already-translated nav links. Header owns the translation step and passes the resolved labels. |
Behavior
Animation
Backdrop fades in; drawer slides from the right using a Framer Motion spring (damping 25, stiffness 200).
Scroll lock
Sets `document.body.style.overflow = 'hidden'` while open, restores it on unmount.
Sections
Logo + close, nav list with active-state styling, Follow + Theme row, Language switcher.
Import
tsx
import { MobileNav } from '@/components/layout/MobileNav'