Baik, pada tahap ini kita akan mengintegrasikan halaman Finance ke dalam sidebar aplikasi. Tujuannya agar pengguna dapat langsung mengakses halaman Catatan Keuangan melalui menu utama dashboard tanpa perlu mengetik URL secara manual.

Silakan teman-teman buka file layout utama yang digunakan oleh seluruh halaman, yaitu:

resources/js/layouts/Default.vue

Di dalam file ini, biasanya terdapat struktur menu atau daftar navigasi yang digunakan untuk membentuk sidebar. Menu tersebut biasanya ditulis dalam bentuk array objek JavaScript, di mana setiap objek mewakili satu item menu dengan atribut seperti label, icon, dan to.

Tambahkan Menu Baru

Sekarang, tambahkan kode berikut tepat di bawah menu Home:

{
  label: 'Finance',
  icon: 'i-lucide-dollar-sign',
  to: '/finance-records',
  onSelect: () => {
    open.value = false
  },
},

Mari kita bahas satu per satu fungsi dari tiap bagian kode di atas:

• label Ini adalah teks yang akan muncul di sidebar. Dalam kasus ini, kita beri nama Finance agar pengguna langsung memahami bahwa menu ini berkaitan dengan data keuangan.
• icon Di sini digunakan ikon i-lucide-dollar-sign dari Lucide Icons. Ikon ini akan muncul di sebelah kiri teks menu, menandakan bahwa menu tersebut berhubungan dengan uang atau transaksi keuangan. Kamu bisa mengganti ikon ini dengan ikon lain seperti i-lucide-wallet atau i-lucide-coins sesuai preferensi tampilan.
• to Properti ini menentukan rute (route) yang akan dituju ketika menu diklik. Dalam hal ini, ketika pengguna memilih menu Finance, aplikasi akan diarahkan ke halaman /finance-records, yaitu halaman Index.vue yang sebelumnya sudah kita buat.
• onSelect Baris ini berfungsi untuk menutup sidebar secara otomatis setelah pengguna memilih menu. Hal ini penting terutama untuk tampilan mobile, agar sidebar tidak tetap terbuka setelah pengguna berpindah halaman. Nilai open.value = false berarti sidebar akan tertutup setelah item Finance dipilih.

Maka jika kita buka dashboard akan terlihat seperti berikut ini:

Sampai pada materi kali ini, kita sudah berhasil membuat seluruh fitur CRUD sederhana menggunakan Laravel 12, Inertia.js, Vue, Tailwind CSS, dan juga Nuxt UI. Semoga materi ini dapat menjadi pengantar yang membantu teman-teman dalam mempelajari integrasi Laravel dengan Nuxt UI. Bagi teman-teman yang ingin mengunduh atau melakukan clone proyek sederhana ini, bisa melalui tautan berikut:

https://lagikoding.com/source-codes/download-source-code-tutorial-laravel-12-inertia-vue-tailwind-nuxt-ui

Sampai jumpa pada seri paket belajar berikutnya.....