Konfigurasi Sidebar pada Starter Kit Laravel 12 dengan Inertia, React JS, dan Tailwind CSS

Pada materi kali ini, kita akan belajar menambahkan sebuah menu baru pada sidebar yang sudah tersedia, tepatnya di bawah menu Dashboard. Langkah pertama, silakan buka file app-sidebar.tsx. Di dalamnya, teman-teman akan menemukan kode seperti berikut:

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard',
        href: '/dashboard',
        icon: LayoutGrid,
    },
];

Nah, tugas kita adalah menambahkan satu item menu baru untuk Products. Hasilnya akan menjadi seperti ini:

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard',
        href: '/dashboard',
        icon: LayoutGrid,
    },
    {
        title: 'Products',
        href: '/products',
        icon: PackageSearch,
    },
];

1. const mainNavItems: NavItem[]

• const → variabel ini bersifat constant, artinya nilai referensinya tidak bisa diganti dengan array baru, meskipun isi arraynya masih bisa dimodifikasi.

• mainNavItems → ini adalah nama variabel yang digunakan untuk menyimpan daftar menu utama di sidebar.

• : NavItem[] → ini adalah Type Annotation milik TypeScript. Artinya, mainNavItems harus berupa array yang isinya mengikuti struktur NavItem. Biasanya, NavItem adalah interface atau type yang didefinisikan sebelumnya, misalnya:

  type NavItem = {
      title: string;
      href: string;
      icon: React.ElementType;
  };
  

2. Isi Array

Array ini berisi dua objek, masing-masing mewakili satu menu di sidebar.

a. Menu Dashboard

{
    title: 'Dashboard',
    href: '/dashboard',
    icon: LayoutGrid,
}

• title → teks yang akan ditampilkan pada menu, yaitu Dashboard.
• href → URL tujuan saat menu ini diklik (/dashboard).
• icon → ikon yang digunakan, dalam hal ini LayoutGrid dari pustaka Lucide React.

b. Menu Products

{
    title: 'Products',
    href: '/products',
    icon: PackageSearch,
}

• title → nama menu adalah Products.
• href → URL yang dituju (/products).
• icon → ikon yang digunakan adalah PackageSearch.

3. Fungsi Utamanya

Struktur ini dipakai oleh komponen sidebar untuk menampilkan daftar menu secara dinamis. Alih-alih menulis HTML menu satu per satu, kita cukup membuat daftar seperti ini, lalu komponen akan melakukan looping dan menampilkan menu sesuai data.

Contoh render-nya kira-kira begini:

mainNavItems.map((item) => (
    <NavLink href={item.href}>
        <item.icon />
        {item.title}
    </NavLink>
))

Import Icon

Jangan lupa, karena kita menggunakan ikon PackageSearch, maka kita perlu mengimpornya dari Lucide React. Silakan tambahkan pada bagian import seperti berikut:

import { BookOpen, Folder, LayoutGrid, PackageSearch } from 'lucide-react';

Untuk eksplorasi lebih banyak icons, teman-teman bisa mengunjungi melalui tautan berikut ini, dengan cara copy JSX.

https://lucide.dev/icons/

Dengan langkah ini, menu Products akan otomatis muncul di sidebar teman-teman, tepat di bawah menu Dashboard. Sederhana, tapi efektif untuk memperluas navigasi aplikasi kita.

Kesimpulan

Kali ini kita telah belajar menambahkan menu baru pada sidebar di Starter Kit Laravel 12 dengan Inertia, React JS, dan Tailwind CSS ternyata cukup sederhana. Kita hanya perlu:

1. Membuka file app-sidebar.tsx.
2. Menambahkan item baru pada array mainNavItems.
3. Mengimpor ikon yang dibutuhkan dari Lucide React.

Dengan tiga langkah singkat ini, navigasi aplikasi menjadi lebih kaya dan terstruktur. Teknik yang sama bisa Anda terapkan untuk menambahkan menu lain sesuai kebutuhan proyek.

Ingat, kunci dari pengelolaan sidebar yang rapi adalah konsistensi penamaan, ikon, dan urutan menu.