BED-4810: Vertical Nav

[specter-flq]

Description

Replaces the top header with a side vertical nav in the left of the app. In this PR we have:

• The MainNav component which is used in both BHE and CE as well as a SubNav component that is used in the Administration Page of both BHE and CE. Both in bh-shared-ui.
• We have the tests for each.
• The Implementation of each in the CE project
• We have a reorg of routes into a routes folder that has all the routes and the constants that used to be in /ducks/global.

Motivation and Context

This PR addresses: BED-4810

How Has This Been Tested?

Manually and by adding tests.

Screenshots (optional):

Types of changes

• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have met the contributing prerequisites
  • Assigned myself to this PR
  • Added the appropriate labels
  • Associated an issue: Issues and Pull Requests README #672
  • Read the Contributing guide: https://github.com/SpecterOps/BloodHound/wiki/Contributing
• I have ensured that related documentation is up-to-date
  • Open API docs
  • Code comments (GoDocs / JSDocs)
• I have followed proper test practices
  • Added/updated tests to cover my changes
  • All new and existing tests passed

[benwaples]

Im curious what the added AppIcon is used for? Was there a problem with local development?

[specter-flq]

Good question, I saw that was added automatically and didn't really question it. I will dig into it.

[specter-flq]

seems like its not needed so i removed it. But will keep an eye on it.

[maffkipp]

Adding a reminder to point this PR to the stage/v7.0.0 branch before merging

[urangel]

The selected nav item background color in dark mode feels like it has too much contrast against the rest of the nav bar. This ends up making the color of the text not have enough contrast when hovered over.

Light mode looks okay for this situation.

These settings seemed nicer but they might not exactly align with the design system
${isActiveRoute ? 'text-primary dark:text-tertiary bg-neutral-light-4 dark:bg-neutral-dark-5' : 'text-neutral-dark-0 dark:text-neutral-light-1'}

[specter-flq]

The selected nav item background color in dark mode feels like it has too much contrast against the rest of the nav bar. This ends up making the color of the text not have enough contrast when hovered over.

Light mode looks okay for this situation.

These settings seemed nicer but they might not exactly align with the design system ${isActiveRoute ? 'text-primary dark:text-tertiary bg-neutral-light-4 dark:bg-neutral-dark-5' : 'text-neutral-dark-0 dark:text-neutral-light-1'}

@urangel Good point, although maybe you need to pull latest because I had already pushed a possible fix for that, I figured to avoid the color contrast issue I would not apply hover color on active but still have the underline to have some feedback. See below and let me know.

[urangel]

The new nav looks nice! Good work with the expand collapse transitions and thanks for adding the icon creation notes.

[specter-flq]

The new nav looks nice! Good work with the expand collapse transitions and thanks for adding the icon creation notes.

Thanks man! but Icon creation notes was the work of @benwaples so kudos to him. I just moved it into bh-shared so we could use it in both.

[benwaples]

LGTM! Thank you!!