[Feature] main site navigation

[yonikid15]

🤖 Resolves #10793

👋 Introduction

• Create new nav menu for entire site
• Replaces admin side menu

🕵️ Details

• Ran into a bug after cleaning up my code, so I pushed up what I had before that
• I noticed that the role switcher is going to need some tweaking. Right now, it takes a few renders before the current nav role updates (which updates the nav menu view).
• I feel like there's a some styling things I missed as well.
• I need to (possibly) add localized constants for the Role enum for the role sub menu. However, right now the display name for the roles comes from the rolePermission.php so maybe we can alter that.

🧪 Testing

1. Play around with nav menu

[petertgiles]

This is really starting to look great. 🤩 I've done a quick readthrough and played with it a bit. Here are some observations.

[petertgiles]

I just did another code readthrough and flagged a few more things.

[yonikid15]

Josh Design Review:
@JoshBeveridge can you take another look! Should be good to go, other than a couple things that could be spun off into a new issue, so that we can get this merged.

• Image 1 - Contrast on the hover here definitely doesn't pass. Maybe force it to secondary.darkest on dark mode?
• Image 2 - Things don't quite seem center aligned to me - I think it's the divider line in particular?
• Can we make the dividers in the nav base:all(black.light)?

• Image 3 - The chevron looks different... is it because we're using the mini Heroicon?

It's using the chevron we use site wide (e.g. Accordions). If you want to change the size, then well need to make a new issue.

• Image 4 - Dropdown padding is a bit off
• Image 5 - Hover on the notification icon is weird and also contrast again
• Image 6 - This width isn't ideal on admin, but assuming we can't really fix it right now, can we at least vertically align everything to the middle and have the dividers grow in a similar way to the one next to the notification bell?

• Image 7 - Can we ensure the mode switcher is centered with the menu? This wasn't in the design because I had all three elements in this section centered together rather than split apart, but I prefer the split you have, so centering makes more sense
• Image 8 - Right now you can open the notification panel on top of the menu, I think opening either should close the other if its open
• Image 9 - The page background for the notification pane is different from the menu/dialogs - we should make it the same (use the menu/dialog one)

This one seems a bit difficult right now, is it okay if we make an issue to resolve this later?

• Image 10 - Can't remember if I mentioned this in my initial review, but the color of these buttons makes me nervous in dark mode... Maybe try inverting them to white?
• Image 11 - Can we adjust the design of the mobile menu card slightly? Ditch the external border and ensure the internal ones are base(black.darkest.2) base:dark(black.darkest.5)
• Image 12 - Contrast on some? of the menu items isn't swapping to the light value in dark mode
• I still can't seem to open submenus with the arrow keys :thinking_face:

Were using the radix navigation menu , which I believe should be accessible out the box. Seems like enter is used to open it, and the arrow keys are used to navigate within the submenu.

[tristan-orourke]

Alright, that's everything for me! 👍

[petertgiles]

@yonikid15 Could you please check how the new department pages with the new hero look with the new nav? Could you check if you need to add the extra x3 of top padding back in that I removed in this commit?

[yonikid15]

@yonikid15 Could you please check how the new department pages with the new hero look with the new nav? Could you check if you need to add the extra x3 of top padding back in that I removed in this commit?

Looks good!

[petertgiles]

Wow, this looks incredible! I can't wait to get it merged in. The TOC menus look weird in Chromatic but they are behaving fine in the app so I won't worry about it. 🤷 I noticed two small things. The role menu seems to be sitting a few pixels higher than the rest of the menu items and the contrast is low on the hover effect on the buttons in light mode. The hover looks great in dark mode.

[yonikid15]

@petertgiles The color contrast passes the AA standards on contrast checker so we should be good on that!
Nice catch on the role sub menu vertical alignment 🦅 👁️. Should be fixed in 18e3777

[petertgiles]

Incredible! It turned out so amazing.