To source

Sheet

A sheet is basically a burger menu. Composed of a-blur.

A sheet is a panel that slides in from the edge of the screen, commonly used for mobile navigation menus or filter panels. It uses a-blur for the overlay backdrop.

Example

<script setup lang="ts">
import "@sv/elements/portal";
import "@sv/elements/blur";

defineProps<{
  enabled?: boolean;
}>();
</script>

<template>
  <a-portal>
    <a-blur
      id="sheet"
      scrolllock
      :enabled="enabled"
      class="group/blur fixed top-0 left-0 block h-full w-full transition-all [&[enabled]]:bg-[#33333333]"
    >
      <div
        :class="[
          'group-[&[enabled]]/blur:-translate-x-full absolute top-0 left-full h-full w-full overflow-auto px-4 py-12 transition-all sm:w-96',
          'bg-zinc-100',
        ]"
      >
        <slot />
      </div>
    </a-blur>
  </a-portal>
</template>

Examples with context

Mobile Navigation

Filter Panel

Accessibility

  • Focus is trapped within the sheet while open
  • Pressing Escape closes the sheet
  • The backdrop prevents interaction with the main content
  • Should provide a clear way to close the sheet (close button, backdrop click, or escape key)