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.

[joshhanley]

@thierroboto the problem will be that the lazy component will have a route of /livewire/update when it renders, as it is happening as part of an ajax request.

So you need to ensure the sidebar is rendered on initial load for it to be the correct route when it is rendered.

I would just defer the count by wrapping the query in a boolean, instead of making the whole sidebar lazy, then once rendered use wire:init to call a method to calculate the count.