Sheet

---
import Sheet from '../components/astro/Sheet.astro';
---

<Sheet id="sheet-demo" title="Side panel" side="right">
  <p>Sheet content goes here.</p>
</Sheet>
<button type="button" class="btn" onclick="window.openSheet_sheet_demo()">Open sheet</button>

<!-- Use .sheet-root so overlay stacks behind the sheet. Rizzo CSS + sheet script. openSheet_<id>(), closeSheet_<id>(). -->
<div class="sheet-root">
  <div class="sheet__overlay" data-sheet-overlay id="sheet-demo-overlay" aria-hidden="true"></div>
  <div class="sheet sheet--right" id="sheet-demo" data-sheet aria-hidden="true" hidden>
    <div class="sheet__content">
      <div class="sheet__header">
        <h2 class="sheet__title">Side panel</h2>
        <button type="button" class="sheet__close" aria-label="Close" data-sheet-close></button>
      </div>
      <div class="sheet__body"><p>Sheet content goes here.</p></div>
    </div>
  </div>
</div>
<button type="button" class="btn" onclick="window.openSheet_sheet_demo()">Open sheet</button>

<script>
  import { Sheet } from '$lib/rizzo';
</script>

<Sheet id="sheet-demo" title="Side panel" side="right" bind:open>
  <p>Sheet content goes here.</p>
</Sheet>
<button type="button" class="btn" onclick={() => (open = true)}>Open sheet</button>

<script setup>
import { ref } from 'vue';
import Sheet from '@/components/rizzo/Sheet.vue';
import Button from '@/components/rizzo/Button.vue';
</script>

<template>
  <Button @click="open = true">Open sheet</Button>
  <Sheet v-model:open="open" title="Panel" side="right">
    <p>Sheet content.</p>
  </Sheet>
</template>

import { useState } from 'react';
import { Sheet, Button } from './components/react';

const [open, setOpen] = useState(false);
<Button onClick={() => setOpen(true)}>Open sheet</Button>
<Sheet open={open} onOpenChange={setOpen} title="Panel" side="right">
  <p>Sheet content.</p>
</Sheet>