Refactor penanganan menu pada sidebar

- Mengurutkan tampilan menu berdasarkan section priority.
- Menambahkan validasi untuk memastikan `$menus` didefinisikan.
- Merapikan logika iterasi dan heading dengan pendekatan yang lebih efisien.
This commit is contained in:
Daeng Deni Mardaeni 2024-12-29 21:14:24 +07:00
parent 091da9832e
commit eae476b2ec

View File

@ -39,95 +39,106 @@
</div> </div>
</div> </div>
@php @php
$headingSystem = 0; $headingOtorisasi = 0;
$headingMain = 0; $headingMain = 0;
$headingMaster = 0; $headingMaster = 0;
$headingSystem = 0;
// Ensure $menus is defined and is an object
$menus = isset($menus) ? json_decode(json_encode($menus)) : new stdClass;
// Define the order of sections
$sectionOrder = ['main','otorisator', 'master', 'system'];
@endphp @endphp
@php $menus = json_decode(json_encode($menus)); @endphp
@foreach($menus as $key => $value) @foreach($sectionOrder as $section)
@foreach($value as $menu) @if(!empty($menus->$section))
@if($key=='main') @if($section == 'otorisator' && $headingOtorisasi == 0)
@if($headingMain == 0) <div class="menu-item pt-2.25 pb-px">
<div class="menu-item pt-2.25 pb-px"> <span class="menu-heading uppercase text-2sm font-semibold text-gray-500 pl-[10px] pr-[10px]">
<span class="menu-heading uppercase text-2sm font-semibold text-gray-500 pl-[10px] pr-[10px]"> Otorisator
Apps </span>
</span> </div>
</div> @php $headingOtorisasi = 1; @endphp
@php $headingMain = 1; @endphp @elseif($section == 'main' && $headingMain == 0)
@endif <div class="menu-item pt-2.25 pb-px">
@elseif($key=='master') <span class="menu-heading uppercase text-2sm font-semibold text-gray-500 pl-[10px] pr-[10px]">
@if($headingMaster == 0) Apps
<div class="menu-item pt-2.25 pb-px"> </span>
<span class="menu-heading uppercase text-2sm font-semibold text-gray-500 pl-[10px] pr-[10px]"> </div>
Master Data @php $headingMain = 1; @endphp
</span> @elseif($section == 'master' && $headingMaster == 0)
</div> <div class="menu-item pt-2.25 pb-px">
@php $headingMaster = 1; @endphp <span class="menu-heading uppercase text-2sm font-semibold text-gray-500 pl-[10px] pr-[10px]">
@endif Master Data
@elseif($key=='system') </span>
@if($headingSystem == 0) </div>
<div class="menu-item pt-2.25 pb-px"> @php $headingMaster = 1; @endphp
<span class="menu-heading uppercase text-2sm font-semibold text-gray-500 pl-[10px] pr-[10px]"> @elseif($section == 'system' && $headingSystem == 0)
Systems <div class="menu-item pt-2.25 pb-px">
</span> <span class="menu-heading uppercase text-2sm font-semibold text-gray-500 pl-[10px] pr-[10px]">
</div> Systems
@php $headingSystem = 1; @endphp </span>
@endif </div>
@php $headingSystem = 1; @endphp
@endif @endif
@if(auth()->user()->hasRole($menu->roles))
@if(isset($menu->sub)) @foreach($menus->$section as $menu)
<div class="menu-item {{ request()->routeIs($menu->path) || request()->routeIs($menu->path.'.*') ? 'show' : '' }}" data-menu-item-toggle="accordion" data-menu-item-trigger="click"> @if(auth()->user()->hasRole($menu->roles))
<div @if(isset($menu->sub))
class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]" <div class="menu-item {{ request()->routeIs($menu->path) || request()->routeIs($menu->path.'.*') ? 'show' : '' }}" data-menu-item-toggle="accordion" data-menu-item-trigger="click">
tabindex="0"> <div
<span class="menu-icon items-start text-gray-500 dark:text-gray-400 w-[20px]"> class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]"
<i class="{{ $menu->icon ?? 'ki-filled ki-element-11 text-lg' }}"></i> tabindex="0">
</span> <span class="menu-icon items-start text-gray-500 dark:text-gray-400 w-[20px]">
<span class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary"> <i class="{{ $menu->icon ?? 'ki-filled ki-element-11 text-lg' }}"></i>
{{ $menu->title }} </span>
</span> <span class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary">
<span class="menu-arrow text-gray-400 w-[20px] shrink-0 justify-end ml-1 mr-[-10px]"> {{ $menu->title }}
<i class="ki-filled ki-plus text-2xs menu-item-show:hidden"> </span>
</i> <span class="menu-arrow text-gray-400 w-[20px] shrink-0 justify-end ml-1 mr-[-10px]">
<i class="ki-filled ki-minus text-2xs hidden menu-item-show:inline-flex"> <i class="ki-filled ki-plus text-2xs menu-item-show:hidden">
</i> </i>
</span> <i class="ki-filled ki-minus text-2xs hidden menu-item-show:inline-flex">
</div> </i>
@if(is_array($menu->sub)) </span>
<div class="menu-accordion gap-0.5 pl-[10px] relative before:absolute before:left-[20px] before:top-0 before:bottom-0 before:border-l before:border-gray-200">
@foreach($menu->sub as $sub)
@if(auth()->user()->hasRole($sub->roles))
<div class="menu-item {{ request()->routeIs($sub->path.'.*') && in_array(request()->route()->getName(), [$sub->path.'.index', $sub->path.'.create', $sub->path.'.edit']) ? 'active' : '' }}">
<a class="menu-link gap-[14px] pl-[10px] pr-[10px] py-[8px] border border-transparent items-center grow menu-item-active:bg-secondary-active dark:menu-item-active:bg-coal-300 dark:menu-item-active:border-gray-100 menu-item-active:rounded-lg hover:bg-secondary-active dark:hover:bg-coal-300 dark:hover:border-gray-100 hover:rounded-lg"
href="{{ $sub->path ? route($sub->path.'.index') : '' }}" tabindex="0">
<span
class="menu-bullet flex w-[6px] relative before:absolute before:top-0 before:size-[6px] before:rounded-full before:-translate-x-1/2 before:-translate-y-1/2 menu-item-active:before:bg-primary menu-item-hover:before:bg-primary">
</span>
<span
class="menu-title text-2sm font-medium text-gray-700 menu-item-active:text-primary menu-item-active:font-semibold menu-link-hover:!text-primary">
{{ $sub->title }}
</span>
</a>
</div>
@endif
@endforeach
</div> </div>
@endif @if(is_array($menu->sub))
</div> <div class="menu-accordion gap-0.5 pl-[10px] relative before:absolute before:left-[20px] before:top-0 before:bottom-0 before:border-l before:border-gray-200">
@else @foreach($menu->sub as $sub)
<div class="menu-item {{ request()->routeIs($menu->path.'.*') ? 'active' : '' }}"> @if(auth()->user()->hasRole($sub->roles))
<a class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]" href="{{ $menu->path ? route($menu->path.'.index') : '' }}"> <div class="menu-item {{ request()->routeIs($sub->path.'.*') && in_array(request()->route()->getName(), [$sub->path.'.index', $sub->path.'.create', $sub->path.'.edit']) ? 'active' : '' }}">
<span class="menu-icon items-start text-gray-500 dark:text-gray-400 w-[20px] menu-item-active:text-primary menu-link-hover:!text-primary"> <a class="menu-link gap-[14px] pl-[10px] pr-[10px] py-[8px] border border-transparent items-center grow menu-item-active:bg-secondary-active dark:menu-item-active:bg-coal-300 dark:menu-item-active:border-gray-100 menu-item-active:rounded-lg hover:bg-secondary-active dark:hover:bg-coal-300 dark:hover:border-gray-100 hover:rounded-lg"
<i class="{{ $menu->icon ?? 'ki-filled ki-element-11 text-lg' }}"></i> href="{{ $sub->path ? route($sub->path.'.index') : '' }}" tabindex="0">
</span> <span
<span class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary"> class="menu-bullet flex w-[6px] relative before:absolute before:top-0 before:size-[6px] before:rounded-full before:-translate-x-1/2 before:-translate-y-1/2 menu-item-active:before:bg-primary menu-item-hover:before:bg-primary">
{{ $menu->title }} </span>
</span> <span
</a> class="menu-title text-2sm font-medium text-gray-700 menu-item-active:text-primary menu-item-active:font-semibold menu-link-hover:!text-primary">
</div> {{ $sub->title }}
</span>
</a>
</div>
@endif
@endforeach
</div>
@endif
</div>
@else
<div class="menu-item {{ request()->routeIs($menu->path.'.*') ? 'active' : '' }}">
<a class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]" href="{{ $menu->path ? route($menu->path.'.index') : '' }}">
<span class="menu-icon items-start text-gray-500 dark:text-gray-400 w-[20px] menu-item-active:text-primary menu-link-hover:!text-primary">
<i class="{{ $menu->icon ?? 'ki-filled ki-element-11 text-lg' }}"></i>
</span>
<span class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary">
{{ $menu->title }}
</span>
</a>
</div>
@endif
@endif @endif
@endif @endforeach
@endforeach @endif
@endforeach @endforeach
</div> </div>
</div> </div>