[SDPA-4967] - Added logic to limit nav depth to 3

[ChrisCampbellCodes]

Motivation and Context

JIRA issue: https://digital-engagement.atlassian.net/browse/SDPA-4967

The current IA has a depth of 5 but the nav design breaks after a depth of 3.

Changed

1. Added logic to limit nav depth to 3

Screenshots

Before:

After:

How Has This Been Tested?

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist

• I've added relevant changes to the documentation.
• I have added tests to cover my changes (if not applicable, please state why)
• My change requires a template update for create-ripple-app.
• I have added template update script for next release.

[dylankelly]

LGTM @ChrisCampbellCodes. Probably also need a corresponding fix on the backend to limit editors adding deeply nested menus in the first place. Relates to #1100

[ChrisCampbellCodes]

Thanks @dylankelly ! The backend menu structure still needs to go to 5 levels deep to meet the IA, this also allows the breadcrumbs etc to show 5 levels deep. I'll follow up with the BE team and ensure that the menu can only go to 5 levels deep