- Buka projek Laravel kalian menggunakan editor Visual Studio Code.
- Buka Dokumentasi Admin LTE milik Jeroennoten dengan klik LINK ini.
- Setelah dokumentasi terbuka silakan scroll ke bawah untuk mencari menu Documentation kemudian klik link Instalation Guide.
- Setelah halaman Instalation Guide terbuka silakan perhatikan Right Menu cari link tentang Menu Config kemudian klik.
- Diperlihatkan contoh script menu standar dari Admin LTE 3 seperti di bawah ini :
'menu' => [
'MAIN NAVIGATION',
[
'text' => 'Blog',
'url' => 'admin/blog',
],
[
'text' => 'Pages',
'url' => 'admin/pages',
'icon' => 'fas fa-fw fa-file',
],
[
'text' => 'Show my website',
'url' => '/',
'target' => '_blank',
],
[
'header' => 'ACCOUNT SETTINGS',
],
[
'text' => 'Profile',
'route' => 'admin.profile',
'icon' => 'fas fa-fw fa-user',
],
[
'text' => 'Change Password',
'route' => 'admin.password',
'icon' => 'fas fa-fw fa-lock',
],
],
- Untuk membuka setting menu seperti di atas pada projek laravel kita silakan kalian buka file adminlte.php yang berada di dalam folder config.
- Kalian akan menemui struktur menu seperti di bawah ini :
'menu' => [
// Navbar items:
[
'type' => 'navbar-search',
'text' => 'search',
'topnav_right' => true,
],
[
'type' => 'fullscreen-widget',
'topnav_right' => true,
],
// Sidebar items:
[
'type' => 'sidebar-menu-search',
'text' => 'search',
],
[
'text' => 'blog',
'url' => 'admin/blog',
'can' => 'manage-blog',
],
[
'text' => 'pages',
'url' => 'admin/pages',
'icon' => 'far fa-fw fa-file',
'label' => 4,
'label_color' => 'success',
],
['header' => 'account_settings'],
[
'text' => 'profile',
'url' => 'admin/settings',
'icon' => 'fas fa-fw fa-user',
],
[
'text' => 'change_password',
'url' => 'admin/settings',
'icon' => 'fas fa-fw fa-lock',
],
[
'text' => 'multilevel',
'icon' => 'fas fa-fw fa-share',
'submenu' => [
[
'text' => 'level_one',
'url' => '#',
],
[
'text' => 'level_one',
'url' => '#',
'submenu' => [
[
'text' => 'level_two',
'url' => '#',
],
[
'text' => 'level_two',
'url' => '#',
'submenu' => [
[
'text' => 'level_three',
'url' => '#',
],
[
'text' => 'level_three',
'url' => '#',
],
],
],
],
],
[
'text' => 'level_one',
'url' => '#',
],
],
],
['header' => 'labels'],
[
'text' => 'important',
'icon_color' => 'red',
'url' => '#',
],
[
'text' => 'warning',
'icon_color' => 'yellow',
'url' => '#',
],
[
'text' => 'information',
'icon_color' => 'cyan',
'url' => '#',
],
],
- Jika di lihat di browser akan muncul tampilan menu seperti ini :
- Silakan edit struktur menu di atas sesuai kebutuhan menu yang ada di aplikasi kalian. Misal menu di atas diedit seperti di bawah ini :
'menu' => [
['header' => 'ACCOUNT SETTING'],
[
'text' => 'ACCOUNT SETTING',
'icon' => 'fas fa-fw fa-share',
'submenu' => [
[
'text' => 'profile',
'url' => 'admin/settings',
'icon' => 'fas fa-fw fa-user',
],
[
'text' => 'change_password',
'url' => 'admin/settings',
'icon' => 'fas fa-fw fa-lock',
],
],
],
[
'text' => 'MASTER DATA',
'icon' => 'fas fa-fw fa-share',
'submenu' => [
[
'text' => 'Produk',
'url' => 'produk',
],
[
'text' => 'Supplier',
'url' => 'supplier',
],
[
'text' => 'Customer',
'url' => 'customer',
],
],
],
[
'text' => 'TRANSAKSI',
'icon' => 'fas fa-fw fa-share',
'submenu' => [
[
'text' => 'Pembelian',
'url' => 'pembelian',
],
[
'text' => 'Penjualan',
'url' => 'penjualan',
],
],
],
[
'text' => 'KEUANGAN',
'icon' => 'fas fa-fw fa-share',
'submenu' => [
[
'text' => 'Pengeluaran',
'url' => 'pengeluaran',
],
[
'text' => 'Pemasukan',
'url' => 'pemasukan',
],
],
],
],
Catatan :
- header - menunjukkan kelompok menu
- text - menunjukkan nama menu
- icon - jenis icon yang akan digunakan menu (diambil dari FONTAWESOME)
- url - alamat route dari menu - cek di file route untuk setiap nama route yang akan dituliskan.
- submenu - menunjukkan submenu
- Sehingga saat ditampilkan di browser akan muncul sepert ini :
Postingan
