Filament•3mo ago

navigation item disabled

Hi, can I disable clicking of navigation item based on a condition? similar to visible but it would be a locked state, not hidden

12 Replies

Dennis Koch•3mo ago

I don't think we support this. Not sure if Navigation items have extraAttributes, but you could try adding a pointer-events-none class.

Anik•3mo ago

Method Filament\Navigation\NavigationItem::extraAttributes does not exist. The pointer-events-none class works perfectly for the <a href> tag when applied through console. Now we need a way to apply it through NavigationItem::class.

Dennis Koch•3mo ago

Hm, probably not possible currently

Anik•3mo ago

Can I make a PR? I have almost figured it out

Dennis Koch•3mo ago

I guess a extraAttributes could be useful in some cases

Anik•3mo ago

How about i add a property $navigationDisabled to pages and in item.blade.php

  <a
        {{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab) }}
        x-on:click="window.matchMedia(`(max-width: 1024px)`).matches && $store.sidebar.close()"
        @if ($sidebarCollapsible)
            x-data="{ tooltip: false }"
            x-effect="
                tooltip = $store.sidebar.isOpen
                    ? false
                    : {
                          content: @js($slot->toHtml()),
                          placement: document.dir === 'rtl' ? 'left' : 'right',
                          theme: $store.theme,
                      }
            "
            x-tooltip.html="tooltip"
        @endif
        @class([
            'fi-sidebar-item-button relative flex items-center justify-center gap-x-3 rounded-lg px-2 py-2 outline-none transition duration-75 hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5',
            'bg-gray-100 dark:bg-white/5' => $active,
            'pointer-events-none' => $navigationDisabled
        ])
    >

  <a
        {{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab) }}
        x-on:click="window.matchMedia(`(max-width: 1024px)`).matches && $store.sidebar.close()"
        @if ($sidebarCollapsible)
            x-data="{ tooltip: false }"
            x-effect="
                tooltip = $store.sidebar.isOpen
                    ? false
                    : {
                          content: @js($slot->toHtml()),
                          placement: document.dir === 'rtl' ? 'left' : 'right',
                          theme: $store.theme,
                      }
            "
            x-tooltip.html="tooltip"
        @endif
        @class([
            'fi-sidebar-item-button relative flex items-center justify-center gap-x-3 rounded-lg px-2 py-2 outline-none transition duration-75 hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5',
            'bg-gray-100 dark:bg-white/5' => $active,
            'pointer-events-none' => $navigationDisabled
        ])
    >

Dennis Koch•3mo ago

Not sure how useful that would be to others. extraAttributes would allow more general modifications. @Dan Harrin Wdyt?

Anik•3mo ago

Also we can add a lock icon for the $navigationDisabled by default. Disabled is a state just like active and can be implemented for NavigationItems. It is different from hidden as the user can view the link in the sidebar, but cannot click it until some steps are completed and $navigationDisabled returns false The scenario is useful in case when we want a user to do some onboarding task before getting access to the other pages. But we don't want to hide the pages through a viewall policy. Instead make the navigation item unclickable through a disabled policy

Dan Harrin•3mo ago

eh, maybe, i certainly dont want to add a specific disabled feature so sounds like extraAttributes is the most flexible idea

Anik•3mo ago

Umm, we would also need to remove the href I guess. I was hoping NavigationItem would have disabled method like Action buttons to handle all the code required for the disabled state internally. I can work on a PR if you want. https://css-tricks.com/how-to-disable-links/

Gerard Cohen

CSS-Tricks

How to Disable Links | CSS-Tricks

The topic of disabling links popped up at my work the other day. Somehow, a "disabled" anchor style was added to our typography styles last year when I wasn't

Dan Harrin•3mo ago

i just think the usages are so limited its not worth introducing a new method for

Anik•3mo ago

The extraAttributes method would do for now

Gaming

Programming

navigation item disabled