<aside id="sidebar" class="sidebar">

    <ul class="sidebar-nav" id="sidebar-nav">

        @foreach($AdminMenu->roots() as $item)
        
            @if($item->attr('category'))
                @canany($item->permission)
                    <li class="nav-heading">{!! $item->title !!}</li>
                @endcanany
            @else
                @can($item->permission)
                    <li class="nav-item">
                        
                        @if($item->hasChildren())
                            <a class="nav-link collapsed" data-bs-target="#{{$item->id}}-nav" data-bs-toggle="collapse" href="#">
                        @else
                            <a class="nav-link" href="{!! $item->url() !!}">
                        @endif 
                            @if ($item->attr('icon'))
                                <i class="bi bi-{!! $item->attr('icon') !!}"></i>
                            @endif 
                            <span>{!! $item->title !!}</span>
                        </a>
                        
                        @if($item->hasChildren())
                            <ul id="{{$item->id}}-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
                                @foreach($item->children() as $child)
                                    <li>
                                        <a href="{!! $child->url() !!}" @if($child->isActive) class="active" @endif>
                                            <i class="bi bi-circle"></i><span>{{ $child->title }}</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                        
                    </li>
                @endcan
            @endif 
        @endforeach

    </ul>

</aside>