折りたためるサイドバーナビ

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[サービス名]

サイドバー上部に表示する名前

[メニュー項目]

グループ名と項目を箇条書きで。例：管理（ダッシュボード、予約、顧客）／設定（店舗情報、通知）

[使用技術]

例：HTML/CSS/JavaScript、React + Tailwind CSS

あなたは管理画面のUIに詳しいフロントエンドエンジニアです。
以下の条件で「折りたためるサイドバーナビ」を実装してください。

## 表示内容
- 上部：ロゴ（テキスト「[サービス名]」で代用）と、開閉ボタン
- メニュー：
[メニュー項目]
- 各項目はアイコン＋ラベル

## レイアウト
- 画面の左端に固定し、高さは画面いっぱい（100dvh）。メニューが多いときはサイドバーの中だけスクロールする
- 開いた状態の幅 260px、畳んだ状態の幅 72px
- 右側の本文エリアは、サイドバーの幅に合わせて広がる（幅の変化は 200ms）

## デザイン
- 背景 #FFFFFF、右端に 1px solid #E2E8F0、padding 16px 12px
- グループ名：12px、font-weight 700、色 #5F6D84、上に 20px の余白
- 項目：高さ 44px、左右の padding 12px、角丸 10px、アイコン 20px（線画、stroke-width 1.75）、ラベル 15px、色 #47566E、アイコンとラベルの間隔 12px
- hover：背景 #F4F6FA
- 現在のページ：背景 #EBF2FF、文字とアイコンの色 #1463F0、font-weight 700

## 畳んだ状態
- ラベルとグループ名を隠し、アイコンだけを中央に並べる。グループの間は 1px の線で区切る
- アイコンに hover またはフォーカスすると、右側にラベルをツールチップで表示する
- 開閉の状態は保存し、次に開いたときも同じ状態にする

## 画面幅ごとの表示
- 1200px以上：最初は開いた状態
- 768px〜1199px（iPadなど）：最初は畳んだ状態。開くと本文の上に重ねて表示する
- 768px未満：サイドバーを隠し、ヘッダーのメニューボタンから左スライドで開く

## アクセシビリティ
- nav 要素に aria-label="メインメニュー" を付ける
- 開閉ボタンに aria-expanded と、状態に応じたラベル「メニューを畳む／広げる」を付ける
- 畳んだ状態でも、各リンクの名前が読み上げられるようにする（ラベルは視覚的にだけ隠す）
- 現在のページには aria-current="page"
- prefers-reduced-motion: reduce のときは幅のアニメーションを無効にする

## 出力形式
- [使用技術]のコードを1つ出力
- メニューの内容はデータ（配列）にまとめる
- アイコンはインラインSVGで用意し、差し替え方をコメントで説明