@php
        $children_menus = \App\Models\Menu\MenuPage::where('menu_page_id', $child_category->id)
            ->orderBy('position')
            ->get();
        
    @endphp
    @if (count($children_menus) > 0)
        <div data-kt-menu-trigger="hover" data-kt-menu-placement="right-start"
            class="menu-item menu-lg-down-accordion me-lg-1">
            <span class="menu-link py-3">
                @if (isset($child_category->icon))
                    <span
                        class="menu-icon"@if ($font_color) style="color:{{ $font_color }} !important;" @endif>{!! $child_category->icon !!}</span>
                @endif
                <span class="menu-title"
                    @if ($font_color) style="color:{{ $font_color }} !important;" @endif>
                    {{ $child_category->title }} </span>
                <span class="menu-arrow d-lg-none"></span>
            </span>
            <div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-rounded-0 py-lg-4 w-lg-225px"
                @if ($bg_color) style="background-color:{{ $bg_color }} !important;" @endif>
                @foreach ($children_menus as $child_category)
                    @include('frontend.layouts.child_menu', [
                        'child_category' => $child_category,
                        'font_color' => $font_color,
                        'bg_color' => $bg_color,
                    ])
                @endforeach
            </div>
        </div>
    @else
        <div class="menu-item">
            <a class="menu-link  py-3 " href="{{ get_link($child_category->id) }}"
                @if ($child_category->link_status) target="{{ $child_category->target }}" @endif>
                @if (isset($child_category->icon))
                    <span class="menu-icon">{!! $child_category->icon !!}</span>
                @endif
                <span class="menu-title"
                    @if ($font_color) style="color:{{ $font_color }} !important;" @endif>{{ $child_category->title }}</span>
            </a>
        </div>
    @endif