"use client"; import Link from "next/link"; import Image from "next/image"; import { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import { useCart } from "./CartProvider"; import { useModalA11y } from "./useModalA11y"; import { fmtINR, fmtMeters } from "@/lib/format"; export default function CartDrawer() { const { items, count, subtotal, hydrated, drawerOpen, openDrawer, closeDrawer, removeItem, updateQty } = useCart(); const drawerRef = useModalA11y(drawerOpen, closeDrawer); // The overlay + drawer are portalled to so their `position: fixed` // resolves against the viewport. app/template.tsx wraps every route in // .route-transition, whose `animation: ... both` holds a computed // `transform: translateY(0)` after it finishes — any non-`none` transform // makes that element a containing block, which would otherwise pin the // drawer to page height instead of the viewport. Portalling escapes it // regardless of the transform's animation timing. Mount guard avoids an // SSR/hydration mismatch (document is client-only). const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); // Header pill: show 00 until hydrated to avoid SSR/CSR mismatch const pill = hydrated ? String(count).padStart(2, "0") : "00"; return ( <> {mounted && createPortal( <>
, document.body, )} {/* Drawer-line CSS, scoped to .cart-drawer to avoid leakage */}