Update navigation

[c0deswitch]

Expose navigation items for screen sizes that are larger than mobile. Attaching a mock for a potential direction. If we are aligned, I will update it to show more accurate specs, hover states, and selected states.

[c0deswitch]

spent some more time refining the nav behavior. attaching how it could look and behave on desktop and mobile, it's quite similar to github! let me know if you have any thoughts or questions.

[shushugah]

This is absolutely wonderful and super helpful!

I will change "Join slack" to be a more simple "Join" which also reduces width. Same desire for "Union job board" or "Security tips" but could also remove that link, since it's not...equally relevant to other TWC specific pages...imho

Does it make sense to make the mobile hamburg menu when expanded...full screen width or is that too big? In any case very happy to start implementing this!

[c0deswitch]

sweet!! agree with simplifying the language and cleaning up any links that are not needed.

re: the mobile menu - the most common pattern i see is a drawer that slides out 1/2 or 3/4 of the width. what do you think about this style?

[c0deswitch]

Join button

Layout and CSS for 'Join' button, default state:

display: inline-flex; padding: 0.375rem 0.75rem; justify-content: center; align-items: center; gap: 0.625rem;

border-radius: 0.5rem; background: #EC2227;

Layout and CSS for 'Join' button, hover state:

display: inline-flex; padding: 0.375rem 0.75rem; justify-content: center; align-items: center; gap: 0.625rem;

border-radius: 0.5rem; background: #F65559;

[c0deswitch]

Nav list item

Nav item, default state

display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;

color: #FFF; font-family: "Helvetica Neue"; font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: normal;

Nav item, hover state

display: flex; padding: 0.125rem 0.25rem; align-items: flex-start; gap: 0.625rem;

border-radius: 0.1875rem; background: #3E3E3E;

Nav item, selected state

Line:
height: 0.125rem;
background: #EC2227;

Nav item, selected and hover