<div class="accordion-item border-0 d-lg-none">
    <div class="accordion-header" id="headingCategories">
        <button type="button" class="accordion-button animate-underline fw-medium collapsed py-2"
            data-bs-toggle="collapse" data-bs-target="#categoriesMenu" aria-expanded="false" aria-controls="categoriesMenu">
            <i class="ci-grid fs-lg me-2"></i>
            <span class="d-block animate-target py-1">{{ __('navbar.categories') }}</span>
        </button>
    </div>
    <div class="accordion-collapse collapse" id="categoriesMenu" aria-labelledby="headingCategories"
        data-bs-parent="#navigation">
        <div class="accordion-body pb-3">
            <div class="dropdown-menu show position-static d-flex flex-column gap-4 shadow-none p-4">
                <div>
                    {{-- <div class="h6">Bakery &amp; bread</div> --}}
                    <ul class="nav flex-column gap-2 mt-n2">

                        @foreach ($categories as $category)
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('product.index', ['filter[category]' => $category->slug]) }}">{{ $category->name }}</a>
                            </li>
                        @endforeach
                       
                    </ul>
                    
                </div>

            </div>
        </div>
    </div>
</div>
