Drawer

Install

pnpm add @agencecinq/drawer

Usage

import '@agencecinq/drawer';

<cinq-drawer-button class="block">
  <button aria-controls="demo-drawer">Open drawer</button>
</cinq-drawer-button>

<cinq-drawer cid="demo-drawer" class="group">
  <div data-dom="overlay" class="fixed inset-0 z-[2147483646] bg-black/50 opacity-0 pointer-events-none group-[[open]]:opacity-100 group-[[open]]:pointer-events-auto"></div>
  <div role="dialog" class="fixed right-0 top-0 z-[2147483647] h-full w-full max-w-md bg-white shadow-2xl translate-x-full transition-transform group-[[open]]:translate-x-0">
    <div class="p-8 flex flex-col gap-4">
      <h2 class="text-2xl font-bold">Bestiary drawer</h2>
      <p class="text-gray-600">
        Use the drawer as a sliding panel listing creatures from your AD&amp;D bestiary: trolls,
        dracoliches, or galeb duhrs guarding the dungeon entrance.
      </p>
      <cinq-drawer-button class="block">
        <button aria-controls="demo-drawer">Close</button>
      </cinq-drawer-button>
    </div>
  </div>
</cinq-drawer>

API

Attributes

Attribute	Required	Description
`cid`	Yes	Drawer identifier (falls back to `id`).
`open`	No	Reflected state attribute (useful for styling).

Methods

Method	Description
`open()`	Opens the drawer.
`close()`	Closes the drawer.
`toggle()`	Toggles between open and closed.

Events

Event	Dispatched by	Detail payload	Description
`drawer-toggle`	`cinq-drawer-button`	`{ drawer, trigger, trap }`	Emitted on `document.documentElement` to request a toggle.
`drawer-open`	`cinq-drawer`	–	Fired after the drawer has been opened.
`drawer-close`	`cinq-drawer`	–	Fired after the drawer has been closed.

Shopify (Liquid snippet)

If you are integrating in a Shopify theme, you can use the provided snippet and Vite plugin.

1) Copy the snippet automatically (Vite)

import { defineConfig } from 'vite';
import { cinqDrawerPlugin } from '@agencecinq/drawer/plugin';

export default defineConfig({
  plugins: [cinqDrawerPlugin()],
});

This copies the package snippet to your theme:

snippets/cinq-drawer.html.liquid

2) Render the snippet

{% render 'cinq-drawer.html',
  id: 'cart-drawer',
  content: '<div class="p-8"><p class="mb-2">The galeb duhr looks like a boulder until it moves.</p><p class="mb-0">Trolls and jermlaines skulk deeper in the dungeon corridors.</p></div>'
%}

<cinq-drawer-button class="block">
  <button aria-controls="cart-drawer" aria-expanded="false">Open cart</button>
</cinq-drawer-button>

Interactive example

Playground (live)

Cart drawer

A slide-in cart sidebar: overlay, scroll lock, and a simple list of AD&D‑style items.

Items in cart 3 monsters