Side navigation text still visible when using click on slotted nav item to change the expanded state

[GCHQ-Developer-847]

Summary of the bug

When using slotted nav items (e.g. React Router) in the side navigation component, if you change the expanded state on click of certain nav items using state alongside the expanded prop, there is an issue with the display of the nav items - the text is still visible.

🪜 How to reproduce

1. Go to this StackBlitz.
2. Click on the 'Search' nav item.
3. See that the side navigation is collapsed but the text is still half visible.

It appears to only happen when slotting in custom links. All works fine when not using slots for the nav item links.

📸 Screenshots or code

🖥 📱 Device

• Browser: Tested in Chrome and Firefox.

🧐 Expected behaviour

The nav item text should not be visible at all when the side navigation is collapsed, i.e. it should behave like it does when slotted links aren't used.

Additional info

Raised by a customer. The behaviour of collapsing on click is useful for when the side navigation needs to be collapsed when a user visits that particular page.