Blade Recursive, increase the depth for padding - php

Question

I want to increase the depth int each time children are in a item so I can pad out the a tag.
Below is my code and I assumed this would work, however the number stays at 1 even though I have got children within my one of the items within $items.
sidebar.blade.php
<nav class="flex flex-col mt-10">
<ul class="pl-4">
#foreach($items as $item)
<x-layouts.sidebar.items :item="$item"></x-layouts.sidebar.items>
#endforeach
</ul>
</nav>
sidebar.items.blade.php
<li>
#if(count($item) > 0)
<a href="{{ $item['href'] }}" class="focus:text-blue-500 dark-focus:text-blue-400 focus:outline-none w-full transition duration-500 ease-in-out pl-4 py-2 text-gray-700 dark:text-gray-400 hover:bg-blue-200 dark-hover:bg-blue-500 transition duration-500 ease-in-out block">
{{ $item['text'] }} {{ $depth }}
</a>
#if (count($item['children']) > 0)
<ul class="pl-4">
#foreach($item['children'] as $child)
<x-layouts.sidebar.items :item="$child" :depth="$loop->parent->index"></x-layouts.sidebar.items>
#endforeach
</ul>
#endif
#else
<hr>
#endif
</li>
Sidebar\Items.php
<?php
namespace App\View\Components\Layouts\Sidebar;
use Illuminate\View\Component;
use Illuminate\View\View;
class Items extends Component
{
/**
* #var array
*/
public $item;
/**
* #var int
*/
public $depth;
/**
* Create a new component instance.
*
* #param array $item
* #param int $depth
*/
public function __construct($item = [], $depth = 1)
{
$this->item = $item;
$this->depth += $depth;
}
/**
* Get the view / contents that represent the component.
*
* #return View|string
*/
public function render()
{
return view('components.layouts.sidebar.items');
}
}
Data:
$this->items = [
[ 'href' => '/home', 'text' => 'Home', 'children' => [], 'active' => 'border-l-2 border-blue-500' ],
[ 'href' => 'javascript:void(0)', 'text' => 'Test', 'children' => [], 'active' => '' ],
[ 'href' => 'javascript:void(0)', 'text' => 'Websites', 'children' => [], 'active' => '' ],
[ 'href' => 'javascript:void(0)', 'text' => 'Websites', 'children' => [], 'active' => '' ],
[],
[
'href' => '/administration',
'text' => 'Administration',
'children' => [
[
'href' => 'javascript:void(0)',
'text' => 'Locked Devsites',
'active' => '',
'children' => []
]
],
'active' => ''
],
[ 'href' => 'javascript:void(0)', 'text' => 'Documentation', 'children' => [], 'active' => '' ],
[ 'href' => 'javascript:void(0)', 'text' => 'Logout', 'children' => [], 'active' => '' ]
];
Result:
Home 1
Test 1
Websites 1
Websites 1
Administration 1
Locked Devsites 5
Documentation 1
Logout 1

Answer 1

If I get it right what you want to achieve, you don't even need the $depth property, since the blade's #foreach directive has its own depth property which tells you how nested you are.
In your code, instead using:
:depth="$depth"
use:
:depth="$loop->depth"