Konfigurasi Menu Header & Sidebar di Laravel 12 Livewire + Flux UI

Setelah kita membuat halaman baru seperti catatans, selanjutnya kita bisa menampilkannya di navbar/header agar mudah diakses oleh pengguna.

Konfigurasi Header

File yang akan kita modifikasi:

resources/views/components/layouts/app/header.blade.php

Tambahkan Menu Baru

Tambahkan menu baru untuk halaman Catatan tepat di bawah menu Dashboard, dengan kode berikut:

<flux:navbar.item 
    icon="layout-grid" 
    :href="route('catatans')" 
    :current="request()->routeIs('catatans')" 
    wire:navigate>
    {{ __('Catatan') }}
</flux:navbar.item>

Hasil Akhirnya

Berikut tampilan akhir kode dalam block navbar:

<flux:navbar class="-mb-px max-lg:hidden">
    <flux:navbar.item 
        icon="layout-grid" 
        :href="route('dashboard')" 
        :current="request()->routeIs('dashboard')" 
        wire:navigate>
        {{ __('Dashboard') }}
    </flux:navbar.item>

    <flux:navbar.item 
        icon="layout-grid" 
        :href="route('catatans')" 
        :current="request()->routeIs('catatans')" 
        wire:navigate>
        {{ __('Catatan') }}
    </flux:navbar.item>
</flux:navbar>

Menu Catatan yang kita tambahkan sebelumnya di header.blade.php menggunakan route bernama catatans. Route ini telah kita definisikan sebelumnya di file:

routes/web.php

Dengan baris kode berikut:

use App\Livewire\Catatan\Index;

Route::get('catatans', Index::class)
    ->middleware(['auth', 'verified'])
    ->name('catatans');

Konfigurasi Sidebar

Silakan teman-teman buka file sidebar.blade.php yang terletak didalam folder:

resources/views/components/layouts/app/

Kemudian tambahkan menu baru dibawah ini:

<flux:navlist.item icon="notebook-text" :href="route('catatans')" :current="request()->routeIs('catatans')" wire:navigate>{{ __('Catatan') }}</flux:navlist.item>

Menu Catatan yang kita tambahkan sebelumnya di header.blade.php menggunakan route bernama catatans. Route ini telah kita definisikan sebelumnya di file:

routes/web.php

Dengan baris kode berikut:

use App\Livewire\Catatan\Index;

Route::get('catatans', Index::class)
    ->middleware(['auth', 'verified'])
    ->name('catatans');

Adapun untuk icon="notebook-text" adalah icon yang sudah kita konfigurasi sebelumnya didalam folder :

resources/flux/icon/notebook-text.blade.php

Pada materi berikutnya kita akan melihat preview dari aplikasi yang sudah kita kerjakan beserta link download full source code nya.