title: Blade Recursive, increase the depth for padding
body: <p>I want to increase the depth <code>int</code> each time children are in a item so I can pad out the <code>a</code> tag.</p>
  <p>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 <code>$items</code>.</p>
  <p><code>sidebar.blade.php</code></p>
  <pre class="lang-html prettyprint-override"><code>&lt;nav class=&quot;flex flex-col mt-10&quot;&gt;
      &lt;ul class=&quot;pl-4&quot;&gt;
          @foreach($items as $item)
          &lt;x-layouts.sidebar.items :item=&quot;$item&quot;&gt;&lt;/x-layouts.sidebar.items&gt;
          @endforeach
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  <p><code>sidebar.items.blade.php</code></p>
  <pre class="lang-html prettyprint-override"><code>&lt;li&gt;
      @if(count($item) &gt; 0)
          &lt;a href=&quot;{{ $item['href'] }}&quot; class=&quot;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&quot;&gt;
              {{ $item['text'] }} {{ $depth }}
          &lt;/a&gt;
          @if (count($item['children']) &gt; 0)
              &lt;ul class=&quot;pl-4&quot;&gt;
                  @foreach($item['children'] as $child)
                      &lt;x-layouts.sidebar.items :item=&quot;$child&quot; :depth=&quot;$loop-&gt;parent-&gt;index&quot;&gt;&lt;/x-layouts.sidebar.items&gt;
                  @endforeach
              &lt;/ul&gt;
          @endif
      @else
          &lt;hr&gt;
      @endif
  &lt;/li&gt;
  </code></pre>
  <p><code>Sidebar\Items.php</code></p>
  <pre class="lang-php prettyprint-override"><code>&lt;?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-&gt;item = $item;
          $this-&gt;depth += $depth;
      }
  
      /**
       * Get the view / contents that represent the component.
       *
       * @return View|string
       */
      public function render()
      {
          return view('components.layouts.sidebar.items');
      }
  }
  </code></pre>
  <p>Data:</p>
  <pre class="lang-php prettyprint-override"><code>$this-&gt;items = [
      [ 'href' =&gt; '/home', 'text' =&gt; 'Home', 'children' =&gt; [], 'active' =&gt; 'border-l-2 border-blue-500' ],
      [ 'href' =&gt; 'javascript:void(0)', 'text' =&gt; 'Test', 'children' =&gt; [], 'active' =&gt; '' ],
      [ 'href' =&gt; 'javascript:void(0)', 'text' =&gt; 'Websites', 'children' =&gt; [], 'active' =&gt; '' ],
      [ 'href' =&gt; 'javascript:void(0)', 'text' =&gt; 'Websites', 'children' =&gt; [], 'active' =&gt; '' ],
      [],
      [
          'href' =&gt; '/administration',
          'text' =&gt; 'Administration',
          'children' =&gt; [
              [
                  'href' =&gt; 'javascript:void(0)',
                  'text' =&gt; 'Locked Devsites',
                  'active' =&gt; '',
                  'children' =&gt; []
              ]
          ],
          'active' =&gt; ''
      ],
      [ 'href' =&gt; 'javascript:void(0)', 'text' =&gt; 'Documentation', 'children' =&gt; [], 'active' =&gt; '' ],
      [ 'href' =&gt; 'javascript:void(0)', 'text' =&gt; 'Logout', 'children' =&gt; [], 'active' =&gt; '' ]
  ];
  </code></pre>
  <p>Result:</p>
  <pre><code>Home 1
  Test 1
  Websites 1
  Websites 1
  Administration 1
  Locked Devsites 5
  Documentation 1
  Logout 1
  </code></pre>