mi6 / ic-ui-kit

Intelligence Community UI Kit (based on StencilJS)
MIT License
25 stars 25 forks source link

Allow navigation items in side navigation to just display information rather than behaving as a link #1626

Open GCHQ-Developer-847 opened 7 months ago

GCHQ-Developer-847 commented 7 months ago

Summary

Allow normal link behaviour on a navigation item in the side navigation to be disabled so that it can just act as a way to display information (an icon and text), e.g. like the user's name when they are signed in to an app.

💬 Description

The navigation items on the side navigation component are currently only designed to act as links, i.e. they are interactive - you can click on them, focus on them and see hover / active states.

A request has been made by a customer to have the option to make a navigation item non-interactive, just displaying an icon and text, such as the user's name if they are signed into the app.

Having a navigation item which doesn't change the URL when clicked is easy enough by just not providing an href or slotting in a link. The issues that remain, however, are:

  1. The navigation item is still in the tab order so still shows a focus indicator when focussed or clicked on.
  2. It still shows hover and pressed states.
  3. It still shows the "pointer" cursor, suggesting that it is clickable.

This ticket would be to provide a way (perhaps a new prop) to remove all this styling ^ so that it is simply displaying the information and doesn't appear to be interactive.

Notes:

💰 User value

This would allow developers to have more control over how they use the side navigation component.

GCHQ-Developer-847 commented 7 months ago

I have created a StackBlitz which demonstrates how this is half possible at the moment, i.e. you can stop the navigation item from redirecting you to a new URL when clicked (see the secondary navigation "Username" item). But the styling / different states are all still there as mentioned above.

(Hoping the link works as I have not used StackBlitz much before!)