}>`. Your brand chrome then wraps **every** page
— including the shipped `Menu` / `Reservations` — so you **never edit the shipped pages to add a
header/footer** (they render inside `` as-is). Mount `` once in the Layout.
- **Pin the top chrome as one fixed block.** Put `` (shipped, dev-only) **above**
your `` inside a single `position:fixed` top region — the header itself is plain in-flow
markup, the region owns the fixing — so banner + header ride together (no scroll drift/gap). Pad
the content by the region's measured height so it clears the chrome and self-corrects when the
banner is dismissed.
- Routes under the Layout: `/menu` → `Menu`, `/reservations` → `Reservations` (both shipped, as-is).
**You add `/` → your own Home** page.
```jsx
import { useRef, useState, useEffect } from "react";
import { Routes, Route, Outlet } from "react-router-dom";
import { OrderCartProvider } from "@/context/OrderCartContext";
import OrderCartDrawer from "@/components/OrderCartDrawer";
import WixManageBanner from "@/components/WixManageBanner"; // shipped, dev-only · default export, no props
import Menu from "@/pages/Menu"; // shipped · default export, no props
import Reservations from "@/pages/Reservations"; // shipped · default export, no props
import Home from "@/pages/Home"; // YOU build
import Header from "@/components/Header"; // YOU build — plain in-flow markup, NOT position:fixed
import Footer from "@/components/Footer"; // YOU build
function Layout() {
const topRef = useRef(null);
const [offset, setOffset] = useState(0);
useEffect(() => { // measure the fixed region → pad content below it
const ro = new ResizeObserver(() => setOffset(topRef.current?.offsetHeight ?? 0));
if (topRef.current) ro.observe(topRef.current);
return () => ro.disconnect();
}, []);
return (<>
{/* null in prod / when dismissed */}
{/* your brand header, in-flow inside this fixed block */}
{/* clears the chrome; shrinks when the banner is dismissed */}
{/* shipped Menu/Reservations render here, untouched */}
{/* overlays every page */}
);
}
}> {/* chrome wraps all */}
} /> {/* yours */}
} /> {/* shipped, as-is */}
} /> {/* shipped, as-is */}