livewire / flux

The official Livewire UI component library
413 stars 37 forks source link

data-current not working #311

Open vincentcordel opened 1 week ago

vincentcordel commented 1 week ago

Sorry for the repost but you closed the previous issue too soon...

Documentation lacks how to properly implement the active menu.

Currently, I can't figure out how to have it recognise the current path. It stays on the root.

Routes

Route::name('vault.')->domain(config('app.vault_url'))->group(function () {
    Route::view('/', 'welcome')->name('homepage'); // stays there
    Route::get('/cms/pages', PagesIndex::class)->name('cms.pages.index'); // active state doesn't work when going to this page
});

Menu (on layout) - how to dynamically set the current on the nabber item

<flux:navbar class="-mb-px max-lg:hidden">
        <flux:navbar.item icon="home" href="{{ route('vault.homepage') }}" current>Home</flux:navbar.item>
        <flux:navbar.item icon="book-open" badge="12" href="{{ route('vault.cms.pages.index') }}">Pages</flux:navbar.item>
</flux:navbar>

I already did remove the "current". I also updated flux to 1.0.8

I still have the issue.

I'm wondering if this has to do with the domain/nested route ?

Route::name('vault.')->domain(config('app.vault_url'))->group(function () {
   ...
});
ju5t commented 1 week ago

What's data-current exactly? Are you talking about the current property/attribute?

If you're using current you need to pass it a boolean. For example, you could pass it:

request()->routeIs('vault.cms.pages.*')

This would match all routes under the vault.cms.pages 'namespace'. This is helpful for headers, because you probably want to have it active for child pages too. If you leave out the asterisk and it would be an exact match vault.cms.pages.

Ps. for us not-contributors trying to help, can you include a reference to the old issue? It saves some time searching for it.

vincentcordel commented 1 week ago

here's the ref #284

From what I understood, flux is doing it automatically. It does work with hardcoded links (ie vault/cms/pages/...) but not with named routes.

I've been told it's been fixed in the latest update (which I installed) but it still doesn't work and I suspect it might be because of the extra domain route/group.

ju5t commented 1 week ago

There may be situations where it doesn't work like you expect. E.g. multi-tenant applications or apps with sub-domains. If it doesn't work, there may be something that breaks it for you.

Personally I wouldn't be bothered about it and just use :current="request()->routeIs()". This gives you much more control anyway.

idealerror commented 1 week ago

I don't see what the issue is. This is working fine in my test environment.

web.php:

Route::name('admin.')->domain('localhost')->group(function () {
    Volt::route('/', 'foo')->name('foo');
    Volt::route('/bar', 'bar')->name('bar');
});

app.blade.php:

 <flux:navlist variant="outline">
        <flux:navlist.item icon="home" href="{{ route('admin.foo') }}">Foo</flux:navlist.item>
        <flux:navlist.item icon="inbox" badge="12" href="{{ route('admin.bar') }}">Bar</flux:navlist.item>
</flux:navlist>

Image

ju5t commented 6 days ago

@idealerror something must be different in your test set-up, perhaps your APP_URL is localhost, too? Because it can't work with different domains unless you also change APP_URL.

I've just tested this on a fresh installation with Laravel Herd by linking two domains to one installation. The menu item is only marked as current when I'm on the APP_URL domain.

For 99% of the apps out there Flux does exactly what you expect. But there are situations where it doesn't work, and that's fine.

idealerror commented 6 days ago

@ju5t ah - you're right. I didn't test with a different APP_URL.

Here's a potential fix that worked for me in the button-or-link.blade.php component:

@php
    $isCurrentPage = function($url) {
        $currentPath = Str::after(request()->url(), request()->root());
        $urlPath = Str::after($url, request()->root());

        return trim($currentPath, '/') === trim($urlPath, '/');
    };

    $current = $current ?? ($href ? $isCurrentPage($href) : false);
@endphp
ju5t commented 6 days ago

@idealerror looks good to me, but there might be side-effects I'm not aware of. But there has been a similar discussion in #277.

Do you have some feedback on this, @nuernbergerA? Could this cause issues with wire:navigate or other functionality?

vincentcordel commented 6 days ago

on my side, i think the problem comes from having a second url (ie APP_URL and VAULT_URL).

i ended up using request->routeIs

RiadhKHEDHIRI commented 3 days ago

Same here. It doesn't work. I use a fresh installation on Windows with Breeze Livewire. I use the provided example of Header component with <flux:navbar.item icon="home" href="{{route('dashboard')}}">Home</flux:navbar.item>

Here is my APP_URL=http://localhost

Using :current="request()->routeIs('dashboard')" fixes the problem but I think it should be fixed (generalized) as DRY is the goal.