Provide ability to disable Navigation links

[vpmartin]

Summary

I think we should be able to disable the links provided as the navigation prop in the AppProvider, i.e. greyed-out with no link attached, but still present.

It is possible to programmatically not show some navigation links, based on some conditions, but it could lead to questions from users on eventual bugs causing some pages not to show.

It allows for a visual information of this page being inaccessible, instead of being not shown.

We could eventually add a customizable tooltip on the navigation item with an information message on why this app is disabled.

Examples

Unfortunately, I cannot share screenshots as the app is company property.

However, I could envision an optional disabled prop in every navigation segment that would allow for the segment to be displayed as disabled; like so:

{
  segment: 'orders',
  title: 'Orders',
  icon: <ShoppingCartIcon />,
  disabled: true
}

Motivation

In the app I am developing, the user has access to some settings in the AppBar through a multi-select dropdown menu. For the sake of simplicity, let's say this dropdown menu allows to select one or more subsystems to monitor in our system.

Some pages provided in the app only have meaning if the user selects only 1 value in this dropdown menu (very highly detailed monitoring of 1 subsystem, also sometimes subsystem-specific logic), while some other pages can display values for many subsystems (higher-level monitoring cards, that can be replicated for as many subsystems are selected as they do not take many space on screen).

The navigation is provided by our back-end through an API request, so this could be achievable by simply not returning 1-subsystem-specific navigation links.

However, I personally would prefer those links to be shown, but greyed-out, so that UX-wise, the user sees them but knows they are not accessible.

Search keywords: disable navigation link dashboardlayout

[apedroferreira]

Sounds like an option we could add, thanks for creating this issue!

Instead of adding new properties to the navigation object used by the AppProvider, as these are features specific to the navigation sidebar in the layout, we're considering new callbacks as props in the DashboardLayout such as getNavigationItemDisabled or renderNavigationItem, similar to some props in https://mui.com/material-ui/api/autocomplete, for example.