Mobile Drawer

Sliding navigation panel.

html

<div class="rsp-dr-stage" data-edge="left">
  <div class="rsp-dr-scrim rsp-dr-scrim--visible"></div>
  <nav class="rsp-dr-panel rsp-dr-panel--open" style="background:#241430;">
    <a href="#">Home</a><a href="#">Reports</a><a href="#">Settings</a>
  </nav>
  <p class="rsp-dr-caption">Open &mdash; slides in from the left</p>
</div>
<style>
.rsp-dr-stage { position: relative; width: 100%; max-width: 320px; height: 140px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; overflow: hidden; font: 13px system-ui, sans-serif; color: #241430aa; }
.rsp-dr-scrim { position: absolute; inset: 0; background: rgba(36,20,48,.35); opacity: 0; }
.rsp-dr-scrim--visible { opacity: 1; }
.rsp-dr-panel { position: absolute; top: 0; bottom: 0; width: 62%; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; }
.rsp-dr-panel a { color: #FAF7F2; text-decoration: none; font-weight: 600; }
[data-edge="left"] .rsp-dr-panel { left: 0; transform: translateX(-100%); }
[data-edge="left"] .rsp-dr-panel--open { transform: translateX(0); }
[data-edge="right"] .rsp-dr-panel { right: 0; transform: translateX(100%); }
[data-edge="right"] .rsp-dr-panel--open { transform: translateX(0); }
.rsp-dr-caption { position: absolute; bottom: -24px; left: 0; }
@media (prefers-reduced-motion: no-preference) {
  .rsp-dr-panel, .rsp-dr-scrim { transition: transform 300ms ease-out, opacity 300ms ease-out; }
}
</style>

tailwind

<div class="relative w-full max-w-[320px] h-[140px] bg-[#FAF7F2] border border-[#24143022] rounded-xl overflow-hidden font-sans text-sm text-[#241430]/70" data-edge="left">
  <div class="tw-dr-scrim tw-dr-scrim-on absolute inset-0 bg-[#241430]/35 opacity-0"></div>
  <nav class="tw-dr-panel tw-dr-open absolute top-0 bottom-0 w-[62%] p-4 flex flex-col gap-2.5 box-border" style="background:#241430;">
    <a href="#" class="text-[#FAF7F2] no-underline font-semibold">Home</a><a href="#" class="text-[#FAF7F2] no-underline font-semibold">Reports</a><a href="#" class="text-[#FAF7F2] no-underline font-semibold">Settings</a>
  </nav>
  <p class="absolute -bottom-6 left-0">Open &mdash; slides in from the left</p>
</div>
<style>
.tw-dr-scrim-on { opacity: 1; }
[data-edge="left"] .tw-dr-panel { left: 0; transform: translateX(-100%); }
[data-edge="left"] .tw-dr-open { transform: translateX(0); }
[data-edge="right"] .tw-dr-panel { right: 0; transform: translateX(100%); }
[data-edge="right"] .tw-dr-open { transform: translateX(0); }
@media (prefers-reduced-motion: no-preference) {
  .tw-dr-panel, .tw-dr-scrim { transition: transform 300ms ease-out, opacity 300ms ease-out; }
}
</style>

react

export function MobileDrawer({
  open = true,
  edge = "left",
  duration = 300,
  accent = "#241430",
}) {
  const closedX = edge === "left" ? "-100%" : "100%";
  return (
    <div style={{ position: "relative", width: "100%", maxWidth: 320, height: 140, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, overflow: "hidden", fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa" }}>
      <div className="scrim" style={{ position: "absolute", inset: 0, background: "rgba(36,20,48,.35)", opacity: open ? 1 : 0 }} />
      <nav className="panel" style={{ position: "absolute", top: 0, bottom: 0, [edge]: 0, width: "62%", padding: 16, display: "flex", flexDirection: "column", gap: 10, boxSizing: "border-box", background: accent, transform: open ? "translateX(0)" : `translateX(${closedX})` }}>
        <a href="#" style={{ color: "#FAF7F2", textDecoration: "none", fontWeight: 600 }}>Home</a>
        <a href="#" style={{ color: "#FAF7F2", textDecoration: "none", fontWeight: 600 }}>Reports</a>
        <a href="#" style={{ color: "#FAF7F2", textDecoration: "none", fontWeight: 600 }}>Settings</a>
      </nav>
      <p style={{ position: "absolute", bottom: -24, left: 0 }}>{open ? "Open" : "Closed"} &mdash; slides in from the {edge}</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .panel, .scrim { transition: transform ${duration}ms ease-out, opacity ${duration}ms ease-out; }
        }
      `}</style>
    </div>
  );
}