Laravel + inertia ＋ Vueのスターターキットで作成されるソースをTypescriptで書き換えるの記事で作成した Laravel のソースを使って今回はshadcn-vueのSidebarを使ってみます。今まではスターターキットで実装されていたナビゲーションメニューを使って機能を切り替えていました。それをSidebarコンポーネントに変更します。
Sidebarコンポーネントの実装
アプリケーション用のAppSidebar.vueコンポーネントを作成し、そのコンポーネントにshadcn-vueのSidebarを組み込みます。ドキュメントが親切なので迷うことはなかったです。今回はシンプルにサイドバーを実装するだけですがメニューにドロップダウンメニューを追加したり出来るようです。resources/js/Layouts/AuthenticatedLayout.vue にSidebarProviderを実装して本体はAppSidebar.vueコンポーネントに実装することでAuthenticatedLayout.vueを実装する画面では共通のサイドメニューが表示されます。
実装した差分をgitHubにあげているので参考にしてください。
シンプル実装版はメニューをオブジェクトの配列で定数として宣言しています。ユーザーの権限に応じてメニューを変化させることも出来そうです。
スマホサイズにするとサイドバーが隠れてくれるのでレスポンシブデザインにも対応しています。
スターターキットでのメニューの実装はパソコン用とスマホ用でそれぞれメニューを記述するスタイルだったので、1箇所だけで済むのは余計なエラーを引き起こさないで済みます。
このように比較的簡単にサイドバーメニューを実装することができました。
