F
Filament•10mo ago
Anik

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
Dennis Koch•10mo 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
AnikOP•10mo 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
Dennis Koch•10mo ago
Hm, probably not possible currently
Anik
AnikOP•10mo ago
Can I make a PR? I have almost figured it out
Dennis Koch
Dennis Koch•10mo ago
I guess a extraAttributes could be useful in some cases
Anik
AnikOP•10mo 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
Dennis Koch•10mo ago
Not sure how useful that would be to others. extraAttributes would allow more general modifications. @Dan Harrin Wdyt?
Anik
AnikOP•10mo 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
Dan Harrin•10mo ago
eh, maybe, i certainly dont want to add a specific disabled feature so sounds like extraAttributes is the most flexible idea
Anik
AnikOP•10mo 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
Dan Harrin•10mo ago
i just think the usages are so limited its not worth introducing a new method for
Anik
AnikOP•10mo ago
The extraAttributes method would do for now

Did you find this page helpful?