<div class="main-nav navbar navbar-expand-xl navbar-light navbar-sticky">
    <div class="offcanvas offcanvas-collapse order-xl-2" id="primaryMenu">
        <div class="offcanvas-header navbar-shadow">
            <h5>Menu</h5>
            <button class="btn-close lead" type="button" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="navbar-nav">
                @foreach($menu->nested() as $list)
                    @if($list->children->count())
                        <li class="nav-item dropdown new-nav-item">
                            <a class="nav-link dropdown-toggle" href="javascript:void(0)" data-bs-toggle="dropdown">
                                {{ $list->data->title() }} <label class="new-dropdown">New</label>
                            </a>
                            <x:florial::menus.top.inner :menu="$list" />
                        </li>
                    @else
                        <li class="nav-item new-nav-item">
                            <a class="nav-link no-dropdown" href="{{ $list->data->route()?->getRoutePath() ?? '' }}">
                                {{ $list->data->title() }} <label class="new-dropdown">New</label>
                            </a>
                        </li>
                    @endif
                @endforeach
            </ul>
        </div>
    </div>
</div>
