コンソールのサイドバーナビゲーション

Next.js App Router で作った社内コンソールにサイドバーナビゲーションを付ける問題です。概要・レポート・設定の3画面すべてでサイドバーが表示され、折りたたみボタンと現在画面の強調が動く必要があります。複数の画面が共有する UI の構成を検証する力を練習します。

サイドバーやヘッダーのように複数の画面が共有する UI はどのアプリにもあります。1画面だけ見れば問題なく動くコードでも、画面が増え移動が頻繁になると、共有 UI をどこに置いたかが使い心地と保守を左右します。この問題は共有ナビゲーションを持つ複数画面のコンソールを扱い、画面間の移動まで含めて確認する習慣を練習します。

どんなプロジェクトですか？

Next.js App Router で作った小さな社内コンソールです。概要・レポート・設定の3画面の本文は完成しており、3画面が共有するサイドバーナビゲーションを新しく作ります。

サイドバーにはどんな動作が必要ですか？

メニュー3件（概要・レポート・設定）で画面を移動でき、折りたたみボタンで畳んだり開いたりでき、いま見ている画面のメニューが強調される必要があります。

どうやって確認しますか？

npm test でテストを実行し、開発サーバー（npm run dev）で画面を移動しながらサイドバーの動きを確認します。1画面だけでなく、画面間の移動まで確認するのがよいです。