Rebuild member navigation menu

[crismali]

What it does

Total rebuild of the main navigation for members on mobile and desktop.

Why it is important

1630

UI Change Screenshot

Mobile collapsed:

Mobile signed in and expanded:

Mobile signed out and expanded:

Desktop without hover:

Desktop signed in and hovering on Borrow Tools:

Desktop signed out and hovering on Borrow Tools:

Desktop signed in as admin and hovering on Membership:

Desktop signed out and hovering on Membership:

Desktop hovering on About Us:

Desktop signed in and hovering on Account:

Implementation notes

Pure CSS implementation of the mobile nav sliding over (admin still depends on the old JS implementation which is why that isn't removed). The hamburger menu is a kind of secret checkbox label so the styles can toggle on the :checked pseudo class. Clicking off to close it is also a label for the checkbox, just one with no opacity.

I didn't rely too much on the Spectre CSS classes/components since there wasn't a good analog for what we wanted on mobile or desktop (members would have had to click a button to make the dropdown appear instead of just being able to hover, that sort of thing).

Right now the context menu is really just another hover dropdown since all it really has is the sign in/out links. "Hours & Locations" will take members to the account home page since that information seems to live in the announcements. "Contact Us" and "Visit Our Website" just go to the tool library site in a new tab. "Tools for Organizations" goes to My Turn (also in a new tab).

Please give me any kind of feedback, especially in terms of the visual design 💅 (I'm not a designer so I was just winging it).

[crismali]

@jim applied your patch and all of the styles were in the right place 👍 I added a small transition for the background color change but that was it. I also left aligned the group labels on mobile so the labels and the links are now in line with one another.