1. Tambahkan colom  "icon" pada appmenunew.

2. Massukkan File tambahkan yang dibutuhkan kedalam folder masing-masing , file di server dengan nama "File Pemasanagan Icon LOV".

* filenya ada di asset_offline dan view>livewire

3. Masuk ke style.blade.css tambahkan style ini :


/* Style Icon */
.icon_sidebar {
width: 17px;
height: 17px;
filter: invert(1);
}

.icon_page {
width: 19px;
height: 19px;
}

.icon_box {
transition: ease-in-out 0.3s;
}

.icon_box:hover {
filter: invert(1);
border: none;
}

/* Style Icon */


4.  Selanjutnya Masuk ke Model appmenunew, dan tambahkan "icon" pada fillable.

5.  Lalu masuk ke dalam appmenunewComponent. Lalu tambahkan code -code ini :


// icons -------------------------
public $searchIcons = '';

public function updatingSearchIcons()
{
$this->resetPage('pageIcons');
}
// icons -------------------------

funtion baru :


public function selectIcon($iconName)
{
$this->icon = $iconName;
$this->alert('success', 'Terpilih : ' . $iconName);
$this->resetPage('pageIcons');
$this->dispatch('close-modal-lov');

}

Masukkan di dalam render :

// Icon LOV -------------------------------------------------------------------------
$packIcons = File::files(public_path('asset_offline/icon'));

if ($this->searchIcons) {
$items = collect($packIcons)->filter(function ($file) {
return stripos($file->getFilename(), $this->searchIcons) !== false;
});
} else {
$items = collect($packIcons);
}


$currentPageIcons = Paginator::resolveCurrentPage('pageIcons') ?: 1;
$slicedItemsIcons = $items->slice(($currentPageIcons - 1) * 84, 84)->all();
$dataIcons = new LengthAwarePaginator($slicedItemsIcons, count($items), 84, $currentPageIcons, [
'pageName' => 'pageIcons',
]);
$dataIcons->setPath(Paginator::resolveCurrentPath());

// ------------------------------------------------------------------------------------

render-view:

'dataIcons' => $dataIcons

6. Lalu masuk kedalam appmenunew.blade lalu tambahkan code code berikut :

thead :

<th class="text-center" style="width: 40px">Icon</th>

tbody:

<td class="text-center">
<img src="{{ asset('asset_offline/icon/' . $datas->icon) }}"
class="icon_page">
</td>

modal add :

<div class="form-group row mb-3">
<label for="icon" class="col-12 col-lg-3 fw-bold mb-2 mb-lg-0 label">Icon</label>
<div class="col-12 col-lg-9">


<div class="d-flex justify-content-between align-items-center gap-1">
<input type="text" id="icon" class="form-control" wire:model="icon"
placeholder="Contoh : <i class=fa-regular .....">
<button type="button" class="btn btn-primary" id="btniconModalLovAdd">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</div>

{{-- <span class="text-danger">*Code copy dari Font Awesome.</span> --}}
@error('icon')
<span class="text-danger" style="font-size: 11.5px;">{{ $message }}</span>
@enderror
</div>
</div>

modal edit :

<div class="form-group row mb-3">
<label for="icon" class="col-12 col-lg-3 fw-bold mb-2 mb-lg-0 label">Icon</label>
<div class="col-12 col-lg-9">


<div class="d-flex justify-content-between align-items-center gap-1">
<input type="text" id="icon" class="form-control" wire:model="icon"
placeholder="Contoh : <i class=fa-regular .....">
<button type="button" class="btn btn-primary" id="btniconModalLovEdit">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</div>

{{-- <span class="text-danger">*Code copy dari Font Awesome.</span> --}}
@error('icon')
<span class="text-danger" style="font-size: 11.5px;">{{ $message }}</span>
@enderror
</div>
</div>

include lov :

@include('livewire.icon-lov')

Js :

// icon LOV -----------------------------------------------------------
window.addEventListener('close-modal-lov', event =>{
$('#iconModal').modal('hide');
});

$(document).ready(function(){
$('#btniconModalLovAdd').click(function(){
$('#iconModal').modal('show');
});
});

$(document).ready(function(){
$('#btniconModalLovEdit').click(function(){
$('#iconModal').modal('show');
});
});
// icon LOV -----------------------------------------------------------

7. Lalu Update sidebarnya menjadi seperti dibawah ini :

{{-- Update Untuk Icon --}}
@if($datas->appmenunew->icon)
<img src="{{ asset('asset_offline/icon/' . $datas->appmenunew->icon) }}" class="icon_sidebar">
@else
<i class="fa-regular fa-folder-open"></i>
@endif
<span class="ms-3">{{ $datas->appmenunew->appmenunew }}</span>
{{-- Update Untuk Icon --}}