通知・オーバーレイ
ドロワー
ボタンで右側からパネルがスライドイン。背景クリックか×で閉じる。モバイルではボトムシートになる想定のスタイル。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューは枠内に収めるため、オーバーレイを position:absolute（ステージ基準）で実装しています。実際のページで画面全体に重ねるときは position:fixed に変え、body 直下など高い階層へ置いてください。
コード（コピーして使えます）
<div class="stage" id="stage">
<button class="open-btn" id="openDrawer">メニューを開く</button>
<div class="backdrop" id="backdrop" aria-hidden="true"></div>
<div class="drawer" id="drawer" role="dialog" aria-modal="true" aria-label="サイドメニュー" aria-hidden="true">
<div class="drawer-header">
<p class="drawer-title">メニュー</p>
<button class="close-btn" id="closeDrawer" aria-label="閉じる">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<line x1="3" y1="3" x2="13" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="13" y1="3" x2="3" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
<nav class="drawer-nav">
<a class="drawer-item" href="#">ホーム</a>
<a class="drawer-item" href="#">プロフィール</a>
<a class="drawer-item" href="#">設定</a>
<a class="drawer-item" href="#">ヘルプ</a>
</nav>
</div>
</div>