Sidebar
x-teleport 繪製到 body 直下的抽屜式元件。trigger 槽位點擊開啟，Escape / × / 背景點擊關閉。side (left/right)、size (sm/md/lg)、backdrop 3 軸構成變體。焦點捕獲 (x-trap.inert.noscroll) 和 role=dialog/aria-modal=true 確保無障礙。backdrop=false 時整個 overlay 設 pointer-events-none，面板單獨改回 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 アニメーション --}}