Sidebar
x-teleport で body 直下に描画される drawer 系コンポーネント。trigger slot を click で開き、Escape / × / 背景 click で閉じる。side (left/right)・size (sm/md/lg)・backdrop の 3 軸で variant を作る。focus trap (x-trap.inert.noscroll) と role=dialog/aria-modal=true で a11y も担保。backdrop=false の時は overlay 全体を pointer-events-none にして、panel のみ pointer-events-auto に戻し、背後ページを操作可能にする (永続 inspector ・ツールパレット用途)。
default side=left / size=md / backdrop=true / closeOnBackdrop=true / escape=true — 各 iframe 内で trigger を押して動作を確認
左 (default) — side=left, size=md, backdrop=true
右 — side=right, size=md, backdrop=true
no-backdrop — :backdrop="false" / 背景が操作可能
with-content — 実用的なナビゲーション (logo + menu + user)
props 一覧
id— string|null (default:sidebar_{uniqid()})。dispatch で外部から開閉する時に指定side—'left'|'right'(default:'left')size—'sm'(w-64) |'md'(w-80) |'lg'(w-96) (default:'md')backdrop— bool (default: true)。false で半透明黒の dim 無し + 背景操作可能closeOnBackdrop— bool (default: true)。backdrop=true の時のみ有効escape— bool (default: true)。Escape キーで閉じる
使い方
{{-- 1. 最小: trigger slot 付き (default = side=left, size=md, backdrop あり) --}}
<x-sidebar>
<x-slot:trigger>
<x-button>Open</x-button>
</x-slot:trigger>
<p>drawer の中身</p>
</x-sidebar>
{{-- 2. 右配置 + lg サイズ --}}
<x-sidebar side="right" size="lg">
<x-slot:trigger><x-button>詳細を開く</x-button></x-slot:trigger>
<!-- 詳細パネル -->
</x-sidebar>
{{-- 3. backdrop なし — 永続的な inspector / ツールパレット用途
overlay は pointer-events-none、panel のみ pointer-events-auto なので
drawer を開いたまま本体ページを操作できる --}}
<x-sidebar :backdrop="false">
<x-slot:trigger><x-button>Inspector</x-button></x-slot:trigger>
<!-- inspector 内容 -->
</x-sidebar>
{{-- 4. id 指定 + dispatch で別所から開く --}}
<x-sidebar id="filters" side="right">
<!-- filter UI -->
</x-sidebar>
<button x-on:click="$dispatch('open-sidebar-filters')">Filters</button>
<!-- 閉じる: $dispatch('close-sidebar-filters') -->
{{-- props: id, side='left', size='md', backdrop=true, closeOnBackdrop=true, escape=true --}}
{{-- size: sm (w-64) / md (w-80, default) / lg (w-96) --}}
{{-- a11y: role=dialog, aria-modal=true, x-trap.inert.noscroll --}}
{{-- 描画: x-teleport で body 直下 / slide-in アニメーション --}}