Drawer

Components drawer

Trigger button with a right-edge slide-over panel.

Markup

Drops in as data-pb-block="drawer".

html

<div data-pb-block="drawer" class="pb-drawer" x-data="{ open: false }">
  <button type="button" class="pb-drawer__trigger" @click="open = true" style="display:inline-block;padding:0.7rem 1.4rem;border:0;border-radius:0.5rem;background:#4f46e5;color:#fff;font-weight:600;cursor:pointer;">Open drawer</button>
  <div class="pb-drawer__backdrop" x-show="open" x-cloak x-transition.opacity @click="open = false" @keydown.escape.window="open = false" style="position:fixed;inset:0;background:rgba(15,23,42,0.55);z-index:1000;"></div>
  <aside class="pb-drawer__panel" role="dialog" aria-modal="true" x-show="open" x-cloak x-transition:enter="pb-drawer-enter" x-transition:enter-start="pb-drawer-enter-start" x-transition:enter-end="pb-drawer-enter-end" x-transition:leave="pb-drawer-leave" x-transition:leave-start="pb-drawer-enter-end" x-transition:leave-end="pb-drawer-enter-start" style="position:fixed;top:0;right:0;height:100%;width:360px;max-width:90vw;background:#fff;box-shadow:-12px 0 40px rgba(15,23,42,0.18);z-index:1001;display:flex;flex-direction:column;">
    <div class="pb-drawer__header" style="display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #e2e8f0;">
      <h3 class="pb-drawer__title" style="margin:0;font-size:1.15rem;color:#0f172a;">Drawer</h3>
      <button type="button" class="pb-drawer__close" @click="open = false" aria-label="Close" style="display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:0;border-radius:0.375rem;background:transparent;color:#475569;cursor:pointer;line-height:0;">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>
    <div class="pb-drawer__body" style="padding:1.5rem;overflow-y:auto;color:#475569;line-height:1.6;">
      <p style="margin:0;">Slide-over panel content. Great for navigation, filters or details.</p>
    </div>
  </aside>
</div>

Settings

Interactive behaviour is built in; on top of that every block supports:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="drawer" so it imports as a labelled, editable component.
Interactive out of the box: Ships with Alpine state baked in (x-data, @click, x-show, x-transition) — open/close, tabs and toggles work with no wiring. These owner-authored blocks are trusted and keep their executable directives.