Header / Drawer

---
import HeaderDrawer from "../components/figma/HeaderDrawer.astro";

const navItems = [
  { label: "Home", href: "#", current: true },
  { label: "For Sale", href: "#" },
  { label: "About Us", href: "#" },
  { label: "Testimonials", href: "#" },
  { label: "Contact Us", href: "#" },
];
---
<div style="display:flex;flex-direction:column;gap:32px;">
  <HeaderDrawer
    logoText="Logo"
    navItems={navItems}
    phone="07 3123 4567"
    ctaLabel="Enquire Now"
    tone="base-100"
  />
  <HeaderDrawer
    logoText="Logo"
    navItems={navItems}
    phone="07 3123 4567"
    ctaLabel="Enquire Now"
    tone="neutral"
  />
</div>

<p>
  The burger is visible at every viewport size for this variant — it doesn't collapse into a
  desktop nav row, so resize the browser to confirm the bar layout (logo · phone · CTA · burger)
  reflows rather than swaps components. Phone and CTA hide from the bar below 900px but always
  reappear inside the slide-in drawer. The drawer itself is intentionally always base-100/base-content
  regardless of header tone, so it stays legible on dark and transparent variants alike.
</p>