Mobile Nav

Right-side drawer opened from Header's hamburger on narrow viewports. Contains nav links and social icons. Locks body scroll while open.

The drawer renders outside this preview box via fixed positioning. Open it to inspect the layout.

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.

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.

tsx

import { MobileNav } from '@/components/layout/MobileNav'