Navbar.item :current not working with livewire lazy

[thierroboto]

Hi,

In my menu, I have one navbar item that has a badge that is a count of posts. In order to prevent the count from slowing down the menu, i made a livewire component with that item and set it as lazy.

With the same code in the livewire component, the "current" doesn't work and doesnt give it an active background.

The code without livewire that works:

<flux:navlist.item icon="document-magnifying-glass" badge="23" badge-color="blue"
                href="{{ route('documents.index') }}" wire:navigate
                class="menu-item hover:!bg-primary-500/25 hover:!text-white data-[current]:!border-0 data-[current]:!bg-primary-500/25 data-[current]:!text-white">
                {{ __('Documents') }}
            </flux:navlist.item>

The livewire blade component (tried it without the current parameter also):

<div>
    @php
        $currentRoute = request()->route()->getName();
    @endphp
    <flux:navlist.item icon="document-magnifying-glass" badge="{{ $count }}" badge-color="blue"
        href="{{ route('documents.index') }}" wire:navigate :current="$currentRoute === 'documents.index'"
        class="menu-item hover:!bg-primary-500/25 hover:!text-white data-[current]:!border-0 data-[current]:!bg-primary-500/25 data-[current]:!text-white">
        {{ __('Documents') }}
    </flux:navlist.item>
</div>

The livewire component code:

<?php

namespace App\Livewire;

use Illuminate\Support\Facades\Cache;
use Livewire\Component;
use Livewire\Attributes\Locked;

class SidebarDocumentsCount extends Component
{
    #[Locked]
    public $count;

    public function mount()
    {
        $user = auth()->user();
        $this->count = Cache::remember('user-' . $user->id . '-documents-count', 60, function () use ($user) {
            return $user->documents->count();
        });
    }

    public function placeholder(array $params = [])
    {
        return view('livewire.placeholders.sidebar-documents-count', $params);
    }

    public function render()
    {
        return view('livewire.sidebar-documents-count');
    }
}

[ju5t]

Can you please check your formatting? It's incredibly difficult to read at the moment.

[thierroboto]

Sorry about that, i tried a few times, github just wont comply!

[jeffchown]

@thierroboto If you could try to include your code blocks by using 3 backticks instead of 1. e.g.

3 backticks on a line by themselves

...code...

3 backticks on a line by themselves

It should format better.

[thierroboto]

Thanks for the tip! Done. Much better now.