feat: centred and styled productsNavbar

[Kinukeo]

Description

Buttons on the navbar will now change depending on which wrapper is selected, these buttons also now allow the user to navigate to other wrappers.

relates #306

Checklist:

Put an x in the boxes that apply to this pull request (you can also fill these out after opening the pull request). If you're unsure about any of these, don't hesitate to leave a comment on this pull request!

• I have read the gliff.ai Contribution Guide.
• I have requested to pull a branch and not from main.
• I have checked all commit message styles match the requested structure.
• My code follows the style guidelines of this project.
• I have commented my code, particularly in hard-to-understand areas.
• I have performed a self-review of my own code.
• I have assigned 3 or less reviewers.
• New and existing unit tests pass locally with my changes.
• I have added tests that prove my fix is effective or that my feature works.
• My changes generate no new warnings.
• I have made corresponding changes to the documentation.
• New database changes have been committed.
• If appropriate, I have bumped any version numbers.

[ChasNelson1990]

Some first run through visual comments:

• This appears to be the default navbar lol:
  
  It's what I see when I am logged out but not on the sign in/up pages and also on /manage/projects
• If I click the little cat thing the entire app crashes
• "Navigate to AUDIT" actually takes me to /manage/projects in the account I tested with - this is because it is an essentials account so actually doesn't get AUDIT at all!

Looks like a good start though! I'll look through the code at a later point.

[joshuajames-smith]

Good job on getting this together, it all appears to work for me!
I just have a couple styling changes:

• Could we make the devider lines (marked by the red box) reach the top and bottom?
• Could we add some more space between the centre text and these divider lines?
• The text is currently in all caps, could we have this set as normal?

Also a question. I'm sure not if this is in another pr/issue, but we have lost the current product view and help button?

vs

Finally just a side note, I know we have plans to remove this page from shown via a redirect (#595) but just to note the navbar element exists here!

[ChasNelson1990]

I get the following missing image/icon when I log in?

Also seems true for the other icons

[joshuajames-smith]

I get the following missing image/icon when I log in?

Also seems true for the other icons

I'm also getting this error.

[joshuajames-smith]

It's looking good and the issue with the icons is fixed. I got a couple changes for this PR:

• In AUDIT there is just the team name. Can we use project name and then project name > image name for each of the two AUDIT views? i.e. use CURATE and ANNOTATE content.

[ChasNelson1990]

https://lively-forest-0a5b34a03-585.westeurope.azurestaticapps.net/

[ChasNelson1990]

@Kinukeo wanna solve the conflicts before I review? Otherwise I'll just have to review again?

All requested changes have been resolved

[ChasNelson1990]

• This appears to be the default navbar lol:
  
  It's what I see when I am logged out but not on the sign in/up pages and also on /manage/projects

Just to note, this was because this staging account was veeery old and did not have a team name. All new team's now get a team name by default so this is not actually an issue.