document-navigation-sidebar-item.blade.php

@props(['item', 'icon' => null, 'showUpperLine' => false, 'showLowerLine' => false])

<a href="{{ $item['url'] }}"
   wire:navigate
    @class([
        'fi-sidebar-item-button relative flex items-center justify-center gap-x-3 rounded-lg px-2 py-2 outline-none transition duration-75',
        'hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5' => filled($item['url']),
        'bg-gray-100 dark:bg-white/5' => $item['isActive'],
    ])
>
    <div
        class="fi-sidebar-item-grouped-border relative flex h-6 w-6 items-center justify-center"
    >

        @if ($showUpperLine)
            <div
                class="absolute -top-1/2 bottom-1/2 w-px bg-gray-300 dark:bg-gray-600"
            ></div>
        @endif

        @if ($showLowerLine)
            <div
                class="absolute -bottom-1/2 top-1/2 w-px bg-gray-300 dark:bg-gray-600"
            ></div>
        @endif

        @if ($icon)
            {{ $icon }}
        @else
            <div
                @class([
                    'relative h-1.5 w-1.5 rounded-full',
                    'bg-gray-400 dark:bg-gray-500' => ! $item['isActive'],
                    'bg-primary-600 dark:bg-primary-400' => $item['isActive'],
                ])
            ></div>
        @endif
    </div>

    <span
        @class([
        'fi-sidebar-item-label flex-1 truncate text-sm font-medium',
        'text-gray-700 dark:text-gray-200' => ! $item['isActive'],
        'text-primary-600 dark:text-primary-400' => $item['isActive'],
        ])>
        {{ $slot->isNotEmpty() ? $slot : $item['name'] }}
    </span>
</a>

document-navigation-sidebar.blade.php

@props(['navigationItems', 'depth' => 0, 'rootFolder' => false])

<ul class="flex flex-col gap-y-1 w-full" style="padding-left: {{ $depth }}rem;">
    @if ($depth === 0 and $rootFolder)
        <x-document-navigation-sidebar-item :item="$rootFolder" :showUpperLine="false" :showLowerLine="false">
            <x-slot:icon>
                <x-heroicon-o-home class="w-5 h-5"/>
            </x-slot:icon>
            Home
        </x-document-navigation-sidebar-item>
    @endif
    @foreach($navigationItems as $item)
        <li>
            <x-document-navigation-sidebar-item
                :item="$item"
                :showUpperLine="!$loop->first and !($navigationItems[$loop->index - 1]['isOpen'] and count($navigationItems[$loop->index - 1]['children']))"
                :showLowerLine="!$loop->last and !($item['isOpen'] and count($item['children']))"
            />
            @if ($item['isOpen'] and count($item['children']))
                <div class="py-1">
                    <x-document-navigation-sidebar :navigation-items="$item['children']" :depth="$depth + 1"/>
                </div>
            @endif
        </li>
    @endforeach
</ul>